import styled from 'styled-components/macro'

import { Icon } from 'features/Icon'

export const ScHeaderFilters = styled.div`
  display: flex;
  flex-direction: row;
  margin-bottom: 23px;
  align-items: center;

  .activeLive {
    color: #ffffff;
    background-color: #cc0000;
  }

  .activeButton {
    color: #000000;
    background-color: #ffffff;
  }
`

export const ScFilterItemsWrap = styled.div`
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-end;
`

type Props = {
  background?: string,
  color?: string,
}

export const ScFilterItem = styled.div<Props>`
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 10px;
  cursor: pointer;
  border-radius: 20px;
  text-align: center;
  padding: 6px 16px;
`

export const ScArrow = styled(Icon)`
  margin-right: 15px;
  cursor: pointer;

  :hover {
    /* background-color: rgba(255, 255, 255, 0.5);; */
  }
`
