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

export const AllPlaylistsBox = styled.div`
  width: 300px;
`;

export const AllPlaylistsItemsBox = styled.div`
  border: 1px solid ${borderColors.main};
  margin-top: 10px;
  border-radius: 4px;
`;

export const SinglePlaylistItem = styled.div<{active: boolean}>`
  color: ${fontColors.list};
  font-size: 13px;
  padding: 3px;
  border-bottom: 1px solid ${borderColors.main};
  background: ${props => props.active ? bgColors.main : 'transparent'};
  color: ${props => props.active ? '#fff' : fontColors.main};
  position: relative;
  &:hover {
    .button-box {
      display: block !important;
    }
  }
`;

export const SinglePlaylistItemButtons = styled.div`
  display: none;
  position: absolute;
  right: 5px;
  top: 10px;
`;

export const FolderText = styled.div<{active: boolean}>`
  font-size:11px;
  color: #333;
  color: ${props => props.active ? '#fff' : fontColors.main};
  display: flex;
  overflow: hidden;
`;