@use './CustomSelectFieldOption';
@use './CustomSelectFieldViewField';

@mixin insertCustomSelectFieldError() {
  .customSelect {
    @include CustomSelectFieldViewField.insertSelectFieldViewFieldError();
  }
}

@mixin insertCustomSelectField(
  $width: 320,
  $height: 44,
) {
  .customSelect {
    width: #{$width}px;
    height: #{$height}px;

    position: relative;

    display: flex;
    flex-direction: column;

    @include CustomSelectFieldViewField.insertCustomSelectFieldViewField($width: $width, $height: $height) {
      @content;
    }

    .options {
      $padding-width: 4;

      width: 100%;
      max-height: 316px;

      position: absolute;
      transform: translateY(#{$height + 2}px);

      padding: #{$padding-width}px;
      border-radius: 8px;

      background-color: #FFFFFF;
      border: 1px solid #EAECF0;
      box-shadow: 0 4px 6px -2px #10182808, 0 12px 16px -4px #10182814;

      box-sizing: border-box;

      overflow-y: auto;
      overflow-x: hidden;

      z-index: 10;
      @include CustomSelectFieldOption.insertCustomSelectFieldOption($width: $width - $padding-width * 2);
    }

    @content;
  }
}