.is-selectbox {
  position: relative;
  z-index: 9;

  &.is-disabled {
    pointer-events: none;
  }

  input[type="text"] {
    padding-right: 32px;
  }

  .custom-select-placeholder {
    border: 1px solid $color-border-dark;
    padding: 8px 15px;
    border-radius: 4px;
    line-height: 1;
    // cursor: pointer;
    display: flex;
    align-items: center;
    height: 36px;
    span {
      line-height: 1.2;
    }

    &:hover {
      border: 1px solid $ac-primary;
    }
  }

  &.is-extra-small {
    height: 32px;

    .custom-select-placeholder {
      height: 32px;
    }

    .ac-field {
      top: 5px;
    }

    .buttons {
      .button {
        height: 28px;
      }
    }
  }

  .ac-field {
    position: absolute;
    top: 7px;
    left: 12px;
    width: calc(100% - 15px);
  }

  &.is-open {
    .options {
      opacity: 1;
      visibility: visible;
    }
  }

  .buttons {
    position: absolute;
    gap: 0;
    right: 2px;
    top: 2px;
    margin: 0;
    z-index: 9;

    .button {
      margin: 0 !important;
      color: #616161 !important;
      padding: 0;
      width: 32px;
      height: 32px;
    }
  }

  .options {
    border: 1px solid $color-border;
    box-shadow: $ac-shadow-1;
    background-color: $white-100;
    border-radius: 4px;
    padding: 2px;
    position: absolute;
    width: 100%;
    max-height: 500px;
    overflow-y: auto;
    // transition: 0.2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    max-height: clamp(200px, calc(100vh - 400px), 400px) !important;
    overflow-y: auto;

    input[type="checkbox"] {
      width: 16px;
      height: 16px;
    }

    label {
      position: inherit;
    }

    &.group {
      li {
        display: block;

        ul {
          li {
            display: flex;

            &:hover:not(.is-active, .is-disabled) {
              background-color: $primary-light-gray;
              color: $color-heading;

              label {
                color: $color-heading;
              }
            }
          }
        }
      }
    }

    li {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      border-radius: 4px;
      gap: 8px;
      cursor: pointer;
      transition: 0.2s ease-in-out;
      color: $color-text;

      label {
        color: $color-text;
        cursor: pointer;
      }

      &:hover:not(.group li, .is-active, .is-disabled) {
        background-color: $primary-light-gray;
        color: $color-heading;

        label {
          color: $color-heading;
        }
      }

      strong {
        color: $color-heading;
        font-weight: 500;
      }

      &.is-active {
        background-color: $ac-primary;
        color: $white-100;

        label {
          color: $white-100;
        }
      }

      &.is-disabled {
        opacity: 0.6;
        cursor: not-allowed;
        label {
          cursor: not-allowed;
        }
      }
    }
  }
}