import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'
import { customScrollbar } from 'features/Common'

export const Content = styled.div`
  width: 23.35rem;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;
  ${customScrollbar}
  ${isMobileDevice
    ? css`
      width: 90%;
      margin-top: 30%;
      background: #333;
      border-radius: 4px;
      padding: 20px 0 30px 0; 

      @media (orientation: landscape){
        margin: 0 auto;
        padding: 10px 0;
      }
      @media (max-width: 600px) and (orientation: landscape){
        margin-top: 50px;
      }
    `
    : ''};
`

export const Header = styled.div`
  display: flex;
  align-items: center;
  ${isMobileDevice
    ? css`
      position: relative;
    `
    : ''};
`

export const HeaderActions = styled.div`
  position: absolute;
  display: flex;
  top: 0.71rem;
  right: 0.71rem;
  ${isMobileDevice
    ? css`
      top: 20%;
      right: 40px;
      z-index: 10;
    `
    : ''};
`

export const HeaderTitle = styled.h2`
  margin: 0 auto;
  width: 70%;
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.982rem;
  color: #FFFFFF;
  text-align: center;
  ${isMobileDevice
    ? css`
      text-transform: uppercase;
      font-size: 10px;
      font-weight: 700;
      line-height: 12px;
      margin-bottom: 20px;
    `
    : ''};
`

export const BlockTitle = styled.h3`
  font-weight: normal;
  font-size: 1.14rem;
  line-height: 2.36rem;
  text-transform: capitalize;
`
