'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');

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

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

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

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

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

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

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

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

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

exports.DefaultCard = DefaultCard;
exports.InteractiveCard = InteractiveCard;
exports.InteractiveInverseCard = InteractiveInverseCard;
exports.InverseCard = InverseCard;
exports.InverseOutlineCard = InverseOutlineCard;
exports.OutlineCard = OutlineCard;
