@use '../../../../../styles' as *;
@use '../../../FlexField';

@mixin insertSelectField() {
  .selectField {
    width: 100%;
    position: relative;

    @include FlexField.insertFlexField();

    .modalWindow {
      width: 100%;
      position: absolute;
      z-index: 5;

      .selectModalWindow {
        width: 100%;
        height: fit-content;
        max-height: 300px;

        display: flex;
        flex-direction: column;

        border-radius: 8px;
        padding: 4px;

        background-color: $white;
        box-shadow: 0 0 0 1px $gray-300, 0 4px 6px -2px #10182808, 0px 12px 16px -4px #10182814;

        overflow: scroll;
        scrollbar-width: none;

        .selectFieldOptionsItem {
          width: 100%;
          height: fit-content;

          @include centerInsideContent();

          gap: 8px;
          padding: 10px 16px;

          .label {
            flex: 1;
            text-align: left;
            @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-900);
          }

          &.active {
            background-color: $media-50;
            @include changeSvg($width: 20, $height: 20, $stroke: $media-500, $flex: none);
          }
        }
      }
    }

    @content;
  }
}