@import "../settings/variables";
@import "../tools/typography";

.tiered-select {
  align-items: stretch;
  max-height: 40vh;

  &__arrow {
    height: 24px;
    width: 24px;
  }

  &__arrow-button {
    border: 1px solid transparent;
  }

  &__breadcrumbs {
    background-color: $tiered-select-breadcrumb-background-color;
    flex-wrap: wrap;
    margin-top: spacing(sm);
    max-height: 68px;
    overflow-y: auto;
    padding: spacing(xs) spacing(md);

    &--non-interactive {
      margin-top: spacing(md);
      pointer-events: none;
    }
  }

  &__home {
    height: 20px;
  }

  &__option {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 2px spacing(lg);
  }

  &__overlay {
    max-width: 248px;
  }

  &__quick-create-button,
  &__quick-create-button-icon {
    @include xs-regular--white;
  }

  &__quick-create-button-icon {
    padding-right: spacing(xs);
  }

  &__spinner-overlay {
    min-height: auto;
  }
}