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

import { isMobileDevice } from 'config/userAgent'
import { ButtonBase } from 'features/StreamPlayer/styled'

export const ChaptersText = styled.span`
  margin: 0 14px;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  text-align: center;

  ${isMobileDevice
    ? css`
      margin: 0 5px;
      font-size: 12px;
      width: 25%;
    `
    : ''};
`

type PrevProps = {
  disabled?: boolean,
}

export const Prev = styled(ButtonBase)<PrevProps>`
  width: 29px;
  height: 28px;
  background-image: url(/images/player-prev.svg);

  ${({ disabled }) => (
    disabled
      ? 'opacity: 0.5;'
      : ''
  )}

  ${isMobileDevice
    ? css`
      width: 20px;
      height: 20px;
    `
    : ''};
`

export const Next = styled(Prev)`
  margin-right: 10px;
  transform: rotate(180deg);
`