@import "../settings/variables";
@import "./typography";
@import "../tools/arrows";
@import "../tools/ellipsis";
@import "../tools/forms";

.dropdown-flyout {
  max-height: inherit;
  width: 100%;
  max-height: 855px;
  padding: spacing(sm) 0;

  &__item {
    cursor: pointer;

    width: 100%;
    padding: spacing(xs) spacing(lg);

    @extend .sm-regular--primary;
    letter-spacing: 0.15px;
    color: $core-gray-20;

    &[data-highlighted="true"],
    &:hover {
      background-color: $core-gray-96;
    }
  }

  &__label {
    @include ellipsis;
  }

  &__expand-icon {
    @include arrow-right(4px, $core-black);
    position: relative;
    display: inline-flex;
    align-self: center;
    flex-shrink: 0;
    margin-left: spacing(lg);
    white-space: nowrap;
  }
}