@use "../../tokens/color" as *;
@use "../../tokens/font" as *;

.iati-select {
  color: $color-grey-90;

  &__label {
    display: block;
    margin: 0 0 1rem 0;
  }

  &__control-wrapper {
    position: relative;
    width: 100%;

    &::after {
      position: absolute;
      right: 0.7em;
      top: calc(50% - 0.1875em);
      content: "";
      width: 0.75em;
      height: 0.375em;
      background-color: currentColor;
      clip-path: polygon(15% 0, 0 0, 50% 100%, 100% 0, 85% 0, 50% 70%);
      pointer-events: none;
    }
  }

  &__control {
    display: inline-block;
    padding: 0.7em 2.1em 0.7em 0.7em;
    font-family: $font-stack-heading;
    line-height: 1.1;
    width: 100%;
    height: 100%;
    appearance: none;
    background-color: #fff;
    border: 1px solid $color-teal-50;
    font-family: $font-stack-heading;
    color: $color-grey-90;
    font-weight: 600;
  }
}

.iati-multi-select {
  margin: 1rem 0 0 0;
  padding: 0;

  &__item {
    --display: inline-flex; // Used by .display--* utilities

    display: var(--display);
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    margin: 0;
    padding: 0;
  }
}