import styled from 'styled-components';
import { bgColors, fontColors, borderColors } from '../../colors';

export const CurrentPlaylistBox = styled.div`
  height: 100%;
  width: 400px;
  display: flex;
  flex-direction: column;
`;

export const CurrentPlaylistItems = styled.div`
  overflow-y: auto;
  scroll-behavior: smooth;
  border: 1px solid ${borderColors.main};
`;

export const CurrentPlaylistItemsScroll = styled.div`
`;

export const CurrentPlaylistTopBarBox = styled.div`
  display: flex;
  justify-content: space-between;
`;

export const SinglePlaylistCurrentInfo = styled.div`
  font-size: 12px;
`;

export const SinglePlaylistItemHeader = styled.div`
  display: flex;
  padding: 2px 3px;
  padding-right: 21px;
  margin-top: 5px;
  font-size: 14px;
  justify-content: space-between;
  color: #eee;
  background: #666;
`;

export const StartSpan = styled.span`
  color: ${bgColors.main};
`;

export const SmallSpan = styled.span`
  color: #666;
`;

export const StopSpan = styled.span`
  color: ${bgColors.red};
`;

export const CurrentInfoMainBox = styled.div<{active: boolean}>`
  flex-direction: row;
  display: flex;
  background: #ccc;
  margin-top: 5px;
  padding: 5px 3px;
  border-radius: 4px;
  height: ${props => props.active ? '36px' : '0px'};
  opacity: ${props => props.active ? '1' : '0'};
  transition: height 300ms linear, opacity 300ms linear;
  font-size: 12px;
`;

export const CurrentInfoSingleTimeBox = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

export const CurrentInfoTimeValueSpan = styled.span`
  padding-left: 5px;
`;