sparkletown/sparkle

@import "scss/constants";

$dropdown-item-icon-size: 20px;
$dropddown-list-max-height: 250px;

.SpacesDropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .dropdown-menu {
    max-height: $dropddown-list-max-height;
    overflow-y: auto;
  }

  &__value {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: $font-size--lg;
    font-weight: $font-weight--700;
    line-height: 19px;
  }

  &__item {
    display: flex;
    align-items: center;
    padding: $spacing--sm $spacing--md;

    text-decoration: none;
    font-weight: $font-weight--400;
    font-size: $font-size--md;
    line-height: 17px;

    &:hover {
      background: opaque-black(0.05);
    }

    &-icon {
      min-width: $dropdown-item-icon-size;
      height: $dropdown-item-icon-size;
      margin-right: $spacing--sm;
    }
  }

  .dropdown-menu {
    background: var(--content--under-lighter-20pp);
    box-shadow: 0px 10px 20px opaque-black(0.25);
    border-radius: $border-radius--lg;
  }

  .Dropdown__button {
    display: flex;
    align-items: center;
    padding: $spacing--md $spacing--xl;

    font-size: $font-size--lg;
    font-weight: $font-weight--500;
    line-height: 19px;

    &:focus,
    &:hover {
      background: opaque-white(0.2);
      box-shadow: 0px 2px 4px opaque-black(0.25);
      border-radius: $border-radius--xl;
    }
  }
}