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

import { isMobileDevice } from 'config/userAgent'

type PropsFilterTitle = {
  opacity: number,
}

type PropsArrows = {
  active?: boolean,
}

export const ScSportsFilter = styled.div`
  display: flex;
  color: #ffffff;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  min-width: 15.4%;
  padding-left: 5px;

  ${isMobileDevice
    ? css`
        letter-spacing: 0.15rem;
        font-size: 10px;
        white-space: nowrap;
        padding-left: 0;
        justify-content: center;
      `
    : ''};
`

export const ScFilterTitle = styled.div<PropsFilterTitle>`
  opacity: ${({ opacity }) => opacity};
`

export const Arrows = styled.span<PropsArrows>`
  width: 0.65rem;
  height: 0.65rem;
  border-left: 0.15rem solid #fff;
  border-bottom: 0.15rem solid #fff;
  margin-top: 0.4rem;

  ${isMobileDevice
    ? css`
      width: 6px;
      height: 6px;
      margin-left: 14px;
      margin-top: 3px;
    `
    : ''};

  ${({ active }) => (
    active
      ? css`
      transform: translate(-50%) rotate(135deg);
    `
      : css`
      transform: translate(-50%, -50%) rotate(315deg);
      opacity: 0.5
    `
  )}
`
