@import '~@palmetto/palmetto-design-tokens/build/scss/variables-size';
// The following styles required the :global tag since they need to be applied to react-select elements for which we do not own the markup

@mixin react-select-icon {
  padding: 0;
  padding-right: 2px;
  color: var(--color-text-body-tertiary);

  &:hover {
    color: var(--color-text-body-secondary);
  }
}

%react-select-icon {
  @include react-select-icon;
}

.react-select-icon {
  @extend %react-select-icon;
}

// stylelint-disable
@mixin size-sm {
  :global(.react-select__control) {
    border-radius: var(
      --form-control-size-sm-border-radius,
      var(--INTERNAL_form-control-size-sm-border-radius)
    );
    padding: 0 8px;
    min-height: 32px;
  }

  :global(.react-select__option),
  :global(.react-select__placeholder),
  :global(.react-select__single-value) {
    color: var(--color-text-body-primary);
    font-size: var(
      --form-control-size-sm-font-size,
      var(--INTERNAL_form-control-size-sm-font-size)
    );
  }

  :global(.react-select__multi-value__label) {
    font-size: var(
      --form-control-size-sm-font-size,
      var(--INTERNAL_form-control-size-sm-font-size)
    );
  }

  :global(.react-select__dropdown-indicator) {
    padding: 0;
  }

  :global(.react-select__dropdown-indicator) {
    @include react-select-icon;

    svg {
      width: var(
        --form-control-select-sm-icon-size,
        var(--INTERNAL_form-control-select-sm-icon-size)
      );
      height: var(
        --form-control-select-sm-icon-size,
        var(--INTERNAL_form-control-select-sm-icon-size)
      );
    }
  }
}

%size-sm {
  @include size-sm;
}

.size-sm {
  @extend %size-sm;
}

@mixin size-md {
  :global(.react-select__control) {
    border-radius: var(
      --form-control-size-md-border-radius,
      var(--INTERNAL_form-control-size-md-border-radius)
    );
    padding: 5px 8px;
  }

  :global(.react-select__single-value) {
    color: var(--color-text-body-primary);
    font-size: var(
      --form-control-size-md-font-size,
      var(--INTERNAL_form-control-size-md-font-size)
    );
  }

  :global(.react-select__multi-value__label) {
    font-size: var(
      --form-control-size-md-font-size,
      var(--INTERNAL_form-control-size-md-font-size)
    );
  }

  :global(.react-select__dropdown-indicator) {
    padding: 0;
  }

  :global(.react-select__dropdown-indicator) {
    @include react-select-icon;

    svg {
      width: var(
        --form-control-select-md-icon-size,
        var(--INTERNAL_form-control-select-md-icon-size)
      );
      height: var(
        --form-control-select-md-icon-size,
        var(--INTERNAL_form-control-select-md-icon-size)
      );
    }
  }
}

%size-md {
  @include size-md;
}

.size-md {
  @extend %size-md;
}

@mixin size-lg {
  :global(.react-select__control) {
    padding: 11px 8px 12px 8px;
    border-radius: var(
      --form-control-size-md-border-radius,
      var(--INTERNAL_form-control-size-md-border-radius)
    );
  }

  :global(.react-select__option),
  :global(.react-select__placeholder),
  :global(.react-select__single-value) {
    color: var(--color-text-body-primary);
    font-size: var(
      --form-control-size-lg-font-size,
      var(--INTERNAL_form-control-size-lg-font-size)
    );
  }

  :global(.react-select__multi-value__label) {
    font-size: var(
      --form-control-size-lg-font-size,
      var(--INTERNAL_form-control-size-lg-font-size)
    );
    padding: 2px 6px 1px;
  }

  :global(.react-select__dropdown-indicator) {
    padding: 0;
  }

  :global(.react-select__dropdown-indicator) {
    @include react-select-icon;

    svg {
      width: var(
        --form-control-select-lg-icon-size,
        var(--INTERNAL_form-control-select-lg-icon-size)
      );
      height: var(
        --form-control-select-lg-icon-size,
        var(--INTERNAL_form-control-select-lg-icon-size)
      );
    }
  }
}

%size-lg {
  @include size-lg;
}

.size-lg {
  @extend %size-lg;
}

:global(.select-input-wrapper) {
  font-family: var(--asset-fonts-body);

  :global(.react-select) {
    &:hover {
      :global(.react-select__dropdown-indicator) {
        color: var(
          --form-control-border-color-focus,
          var(--INTERNAL_form-control-border-color-focus)
        );
      }
    }

    :global(.react-select__control) {
      line-height: var(
        --form-control-line-height,
        var(--size-line-height-input)
      );
      border-color: var(--color-border-separator);
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
      background-color: var(--color-background-form-control);

      :global(.react-select__value-container) {
        padding: 0;
      }

      :global(.react-select__placeholder) {
        color: var(--color-text-placeholder);
      }

      :global(.react-select__clear-indicator) {
        padding: 7px;
      }

      :global(.react-select__indicator-separator) {
        display: none;
      }

      &:global(.react-select__control--is-focused) {
        border-color: var(
          --form-control-border-color-focus,
          var(--INTERNAL_form-control-border-color-focus)
        );
        box-shadow: var(
            --form-control-box-shadow,
            var(--INTERNAL_form-control-box-shadow-focus)
          ),
          inset 0 0 0 1px
            var(
              --form-control-border-color-focus,
              var(--INTERNAL_form-control-border-color-focus)
            );
      }

      &:global(.react-select__control--is-disabled) {
        :global(.react-select__dropdown-indicator) {
          color: var(--color-text-placeholder);
        }
      }
    }

    :global(.react-select__option--is-focused) {
      background-color: var(--color-background-tertiary);
    }

    :global(.react-select__option--is-selected) {
      background-color: var(--color-brand-info-500);
    }

    :global(.react-select__menu) {
      z-index: var(--size-z-index-popover);
      background-color: var(--color-background-form-control);
    }

    &.error {
      :global(.react-select__control) {
        border-color: var(
          --form-control-border-color-error,
          var(--color-border-danger)
        );
        background-color: var(
          --form-control-background-color-error,
          var(--color-background-form-control-error)
        );

        &:global(.react-select__control--is-focused) {
          outline: none;
          border-color: var(--color-border-separator);
          background-color: var(
            --form-control-background-color,
            var(--color-background-form-control)
          );
        }
      }
    }
  }

  &.size-sm {
    @extend %size-sm;
  }
  &.size-md {
    @extend %size-md;
  }
  &.size-lg {
    @extend %size-lg;
  }

  @media (min-width: $size-breakpoint-tablet) {
    &.size-sm-tablet {
      @include size-sm;
    }
    &.size-md-tablet {
      @include size-md;
    }
    &.size-lg-tablet {
      @include size-lg;
    }
  }

  @media (min-width: $size-breakpoint-desktop) {
    &.size-sm-desktop {
      @include size-sm;
    }
    &.size-md-desktop {
      @include size-md;
    }
    &.size-lg-desktop {
      @include size-lg;
    }
  }

  @media (min-width: $size-breakpoint-hd) {
    &.size-sm-hd {
      @include size-sm;
    }
    &.size-md-hd {
      @include size-md;
    }
    &.size-lg-hd {
      @include size-lg;
    }
  }

  &.disabled {
    :global(.react-select__control--is-disabled) {
      background-color: var(
        --form-control-background-color-disabled,
        var(--color-background-form-control-disabled)
      );
    }
  }
}
// stylelint-enable

// while we try to avoid important statements, this one is necessary to override bootstrap utilities that are currently in use by some of our teams
.select-input-label {
  margin-bottom: var(
    --form-control-label-margin,
    var(--INTERNAL_form-control-label-margin)
  ) !important;
}
