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

import { isMobileDevice } from 'config/userAgent'

export const ChapterList = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
`

export const ChapterContainer = styled.div`
  position: relative;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;

  :not(:last-child) {
    margin-right: 3px;
  }
`

export const LoadedProgress = styled.div`
  position: absolute;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.6);
  height: 100%;
  max-width: 100%;

  ${isMobileDevice
    ? css`
      background-color: rgba(255, 255, 255, 0.3);
    `
    : ''}
`

export const PlayedProgress = styled.div`
  position: absolute;
  z-index: 2;
  background-color: #CC0000;
  height: 100%;
  max-width: 100%;

  ${isMobileDevice
    ? css`
      background-color: rgba(255, 255, 255, 1);
    `
    : ''}
`
