@import '~@palmetto/palmetto-design-tokens/build/scss/variables-size';

%disabled-base {
  background-color: var(
    --form-control-background-color-disabled,
    var(--color-background-form-control-disabled)
  );
  color: var(--form-control-font-color-disabled, var(--color-text-disabled));
  opacity: 1;

  &:hover {
    cursor: not-allowed;
  }

  &::before,
  &::after {
    cursor: not-allowed;
  }
}

@mixin size-sm {
  border-radius: var(
    --form-control-size-sm-border-radius,
    var(--INTERNAL_form-control-size-sm-border-radius)
  );
  font-size: var(
    --form-control-size-sm-font-size,
    var(--INTERNAL_form-control-size-sm-font-size)
  );

  > select {
    border-radius: var(
      --form-control-size-lg-border-radius,
      var(--INTERNAL_form-control-size-lg-border-radius)
    );
    padding-left: var(
      --form-control-size-sm-padding,
      var(--INTERNAL_form-control-size-sm-padding)
    );
    padding-right: var(--size-spacing-2xl);
    padding-top: calc(
      var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
    );
    padding-bottom: calc(
      var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
    );
  }

  &::before,
  &::after {
    top: calc(var(--size-spacing-sm) + 3px);
  }
}

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

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

@mixin size-md {
  border-radius: var(
    --form-control-size-md-border-radius,
    var(--INTERNAL_form-control-size-md-border-radius)
  );
  font-size: var(
    --form-control-size-md-font-size,
    var(--INTERNAL_form-control-size-md-font-size)
  );

  > select {
    border-radius: var(
      --form-control-size-lg-border-radius,
      var(--INTERNAL_form-control-size-lg-border-radius)
    );
    padding-left: var(
      --form-control-size-md-padding,
      var(--INTERNAL_form-control-size-md-padding)
    );
    padding-right: var(--size-spacing-3xl);
    padding-top: var(
      --form-control-size-md-padding,
      var(--INTERNAL_form-control-size-md-padding)
    );
    padding-bottom: var(
      --form-control-size-md-padding,
      var(--INTERNAL_form-control-size-md-padding)
    );
  }

  &::before,
  &::after {
    top: calc(var(--size-spacing-md) + 3px);
  }
}

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

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

@mixin size-lg {
  border-radius: var(
    --form-control-size-lg-border-radius,
    var(--INTERNAL_form-control-size-lg-border-radius)
  );
  font-size: var(
    --form-control-size-lg-font-size,
    var(--INTERNAL_form-control-size-lg-font-size)
  );

  > select {
    border-radius: var(
      --form-control-size-lg-border-radius,
      var(--INTERNAL_form-control-size-lg-border-radius)
    );
    padding-left: var(
      --form-control-size-lg-padding,
      var(--INTERNAL_form-control-size-lg-padding)
    );
    padding-right: var(--size-spacing-3xl);
    padding-top: var(
      --form-control-size-lg-padding,
      var(--INTERNAL_form-control-size-lg-padding)
    );
    padding-bottom: var(
      --form-control-size-lg-padding,
      var(--INTERNAL_form-control-size-lg-padding)
    );
  }

  &::before,
  &::after {
    top: calc(var(--size-spacing-md) + 9px);
  }
}

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

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

.select-input-native-wrapper {
  font-family: var(--asset-fonts-body);
  position: relative;
  box-shadow: var(
      --form-control-box-shadow,
      var(--INTERNAL_form-control-box-shadow)
    ),
    inset 0 0 0 1px var(--color-border-separator);
  background-color: var(
    --form-control-background-color,
    var(--color-background-form-control)
  );

  &:focus-within {
    outline: none;
    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)
        );
  }

  &::before,
  &::after {
    border-radius: 100px;
    content: '';
    position: absolute;
    background: var(--color-brand-grey-300);
    pointer-events: none;
    width: 10px;
    height: 2px;
  }

  //change the stacking context so this half of the chevron stays above the disabled background color.
  &::before {
    right: calc(var(--size-spacing-sm) + 7px);
    transform-origin: 50% 50%;
    transform: rotate(42deg);
    z-index: 1;
  }

  &::after {
    right: calc(var(--size-spacing-sm) + 1px);
    transform-origin: 50% 50%;
    transform: rotate(-42deg);
  }

  &.disabled {
    @extend %disabled-base;
  }

  > select {
    box-sizing: border-box;
    appearance: none;
    transition-duration: 300ms;
    transition-property: border, background-color;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
    border: none;
    background: transparent;
    width: 100%;
    line-height: var(--form-control-line-height, var(--size-line-height-input));

    &:focus {
      outline: none;
      border-color: var(
        --form-control-border-color-focus,
        var(--INTERNAL_form-control-border-color-focus)
      );
    }

    &:disabled {
      @extend %disabled-base;

      background-color: transparent;
    }
  }

  &.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;
    }
  }

  &.error {
    box-shadow: var(
        --form-control-box-shadow,
        var(--INTERNAL_form-control-box-shadow)
      ),
      inset 0 0 0 1px
        var(--form-control-border-color-error, var(--color-border-danger));
    background-color: var(
      --form-control-border-color-error,
      var(--color-background-form-control-error)
    );

    select:focus {
      outline: none;
      border-color: var(
        --form-control-border-color-focus,
        var(--INTERNAL_form-control-border-color-focus)
      );
      background-color: transparent;
    }
  }
}

.text-input-label {
  margin-bottom: var(
    --form-control-label-margin,
    var(--INTERNAL_form-control-label-margin)
  );
}
