import { css } from 'styled-components';
import { getColorAlias, getDefaultTransition, getDarkenColor, getLightenColor } from '../../utils/index.js';

const DefaultCard = css `
  background: ${getColorAlias('containerDefault')};
  color: ${getColorAlias('contentDefault')};
`;
const OutlineCard = css `
  ${DefaultCard};
  box-shadow: none;
  border: 1px solid ${getColorAlias('borderDefault')}};
`;
const InverseCard = css `
  background: ${getColorAlias('containerInverse')};
  color: ${getColorAlias('contentInverse')};
`;
const InverseOutlineCard = css `
  ${InverseCard};
  box-shadow: none;
  border: 1px solid ${getColorAlias('borderInverse')}};
`;
const InteractiveCard = css `
  ${getDefaultTransition()};
  cursor: pointer;

  &:hover {
    background: ${getDarkenColor('hover01', 'containerDefault')};
  }

  &:active {
    background: ${getDarkenColor('active01', 'containerDefault')};
  }

  &:focus {
    border: 1px solid ${getColorAlias('focusOuter')};
  }

  &:disabled {
    background: ${getColorAlias('disabled01')};
  }
`;
const InteractiveInverseCard = css `
  ${getDefaultTransition()};
  cursor: pointer;

  &:hover {
    background: ${getLightenColor('hover02', 'containerInverse')};
  }

  &:active {
    background: ${getLightenColor('active02', 'containerInverse')};
  }

  &:focus {
    border: 1px solid ${getColorAlias('focusOuter')};
  }

  &:disabled {
    background: ${getColorAlias('disabled01')};
  }
`;

export { DefaultCard, InteractiveCard, InteractiveInverseCard, InverseCard, InverseOutlineCard, OutlineCard };
