"use strict";

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

const styleh_components_1 = require("styleh-components");

const Animations_1 = require("../../../features/Animations");

const styled_1 = require("../meta/styled");

exports.StyledOption = styleh_components_1.styled.div`
  ${Animations_1.snapback + ''};
  width: 100%;
  align-items: center;
  display: flex;

  /* probably not needed */
  font-size: rem(13);
  color: $colors-grey;
  > span {
    color: inherit;
  }
  &:last-child {
    order: -1;
  }
  span {
    color: $colors-black;
  }

  /* @todo */
  height: auto;
  padding: $spacing-small $spacing;

  cursor: pointer;
  user-select: none;

  background: transparent;
  ${props => props.isSelected && styleh_components_1.styled.css`
      background: #efefef;
    `};

  transition: background 0.48s, color 0.12s, padding 0.24s, margin 0.24s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 0.48s;
  animation-direction: alternate;
  animation-fill-mode: forwards;

  /* only if not disabled... */
  &:hover {
    background: $colors-actionblue;
    color: white;
    animation: snapback;
    .text {
      color: $colors-white;
    }
  }

  ${props => props.isDisabled && styled_1.disabledStyles};
  ${props => props.isDisabled && styleh_components_1.styled.css`
      color: lightgray;
      > button,
      > span,
      > a,
      > div {
        color: lightgray;
      }

      &:hover {
        color: lightgray;
        .text {
          color: lightgray;
        }
      }
    `};
`;
/**
 * @todo use `atoms/Text`
 */

exports.SelectText = styleh_components_1.styled.span.attrs({
  className: 'text'
})`
  letter-spacing: 0;
  font: $font-regular-default;
  @tablet-or-smaller() {
    @font(16, regular);
  }
  @phone-or-smaller() {
    @font(14, regular);
  }
`; //# sourceMappingURL=styled.js.map