import styled from '@emotion/styled';

import { createTransition } from '../../../utils/create-transition';

export const OptionListContainer = styled('div')`
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: ${({ theme }) => theme.colors.black900};
  border: 1px solid ${({ theme }) => theme.colors.black700};
  border-radius: 8px;
`;

export const OptionItem = styled('div')<{ disabled?: boolean }>`
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  gap: 4px;
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  background: ${({ theme }) => theme.colors.black900};
  color: ${({ theme }) => theme.colors.white400};
  transition: ${createTransition()};

  &:hover {
    background: ${({ theme, disabled }) => (disabled ? undefined : theme.colors.black700)};
    color: ${({ theme, disabled }) => (disabled ? undefined : theme.colors.white100)};
  }
`;