.select {
  $block: #{&};

  @include flex(column, nowrap, $whitespace-5);

  /* stylelint-disable-next-line @morev/bem/no-block-properties
  -- Positioning affects only internal option-list */
  position: relative;
  min-inline-size: 15rem;
  color: $color-neutral-8;

  &--open {
    #{$block}__option-list {
      @include flex(column);
    }
  }

  &__label {
    font-weight: $font-weight-semi-bold;
    color: $color-neutral-10;
  }

  &__button {
    @include remove-button-styles;
    @include flex(row, nowrap, $whitespace-3, center, space-between);

    inline-size: 100%;
  }

  &__button-body {
    @include flex(row, nowrap, $whitespace-4);
  }

  &__button-image-wrapper {
    @include size(2rem, 2rem);

    position: relative;
  }

  &__button-image {
    object-fit: cover;
    object-position: center;
  }

  &__button-icon {
    inline-size: 1.5rem;
  }

  &__option-list {
    @include remove-list-styles;
    @include position(absolute, calc(100% + $whitespace-4), auto, auto, 0);
    @include flex(column, nowrap);

    z-index: 998;
    display: none;
    inline-size: max-content;
    background-color: $color-neutral-1;
  }

  &__error-message {
    color: $color-status-error;
  }
}