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

import { isMobileDevice } from 'config/userAgent'

export const Wrapper = styled.div`
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;

  > :not(:last-child) {
    margin-right: 20px;
  }

  ${isMobileDevice ? css`
    @media screen and (orientation: landscape){ 
      > :not(:last-child) {
        margin-right: 3px;
      }
    }
    ` : ''}
`

export const WeekDay = styled.div.attrs(() => ({
  'aria-hidden': true,
}))<{isActive?: boolean}>`
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  white-space: nowrap;
  padding: 5px;
  cursor: pointer;

  ${({ isActive }) => (
    isActive
      ? css`
        color: #FFFFFF;
        cursor: default;

        :after {
          position: absolute;
          bottom: 0;
          left: 0;
          content: '';
          width: 100%;
          height: 2px;
          background-color: #FFFFFF;
        }
      `
      : '')}
`
