"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const Animations_1 = require("features/Animations");
const _styled_1 = require("../meta/_styled");
exports.StyledOption = 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: rem(47);
  padding: 0 $spacing;

  cursor: pointer;
  user-select: none;

  background: transparent;
  ${(props) => props.isSelected &&
    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 && styled.css `
    color: lightgray;
    > button,
    > span,
    > a,
    > div {
      color: lightgray;
    }

    &:hover {
      color: lightgray;
      .text {
        color: lightgray;
      }
    }
  `};
`;
/**
 * @todo use `atoms/Text`
 */
exports.SelectText = styled.span.className('text') `
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  // color: $colors-blackrabbit;
  letter-spacing: 0;
  font: $font-regular-default;
  @tablet-or-smaller() {
    @font (16, regular);
  }
  @phone-or-smaller() {
    @font (14, regular);
  }
`;
//# sourceMappingURL=_styled.js.map