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

import { isMobileDevice } from 'config/userAgent'
import { Icon } from 'features/Icon'

export const ScSelectFilter = styled.div`
  display: flex;
  color: white;
  font-size: 14px;
  width: 30%;
  text-transform: uppercase;
  font-weight: 700;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;

  &:hover {
    text-decoration: underline;
  }
  
  ${isMobileDevice
    ? css`
        letter-spacing: 0.15rem;
        font-size: 10px;
      `
    : ''};
`

export const ScArrow = styled(Icon)`
  margin-left: 14px;
`

export const ScTournamentName = styled.div`
`
