$block = ".drop-down";
$height = 36px;
$labelColor = #99abb3;

{$block} {
  position: relative;
  width: 100%;
  user-select: none;

  &.margin {
    margin-top: 8px;
    margin-bottom: 12px;
  }

  &__button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;

    &.ghost > span {
      margin: 0;
      min-width: 0;
    }

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .button--ghost {
    z-index: 1;
    padding: 0;
    border: none;
    border-bottom: 1px solid $c-gray-base;
    border-radius: 0;
    background: transparent;
    color: $c-gray-darker;

    &:hover {
      color: $c-gray-darker;
    }

    &:focus {
      > svg {
        fill: $c-brand-base;
      }

      outline: none;
      border-bottom: 2px solid $c-brand-base;

      +label {
        color: $c-brand-base;
      }
    }

    svg {
      fill: $c-gray-darker;
    }
  }

  &__label {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 0;
    color: $labelColor;
    font-size: 16px;
    transition: transform 100ms;
    transform-origin: 0 0;

    &.selected {
      font-size: 14px;
      transform: translate(0, -21px);
    }
  }

  &__popover {
    width: 100%;
  }

  &__badge {
    margin: 2px;
    white-space: nowrap;
  }
}

.icon-drop-down-option {
  justify-content: unset;
  width: 100%;
  white-space: nowrap;
}