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

@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)
  );

  > input {
    padding: var(
      --form-control-size-sm-padding,
      var(--INTERNAL_form-control-size-sm-padding)
    );
    border-radius: var(
      --form-control-size-sm-border-radius,
      var(--INTERNAL_form-control-size-sm-border-radius)
    );
  }

  .prefix {
    padding: var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
      0
      var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
      var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      );
  }

  .suffix {
    padding: var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
      var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
      var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
      0;
  }

  .clear-button {
    padding: var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
      var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
      var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      )
      0;
  }

  &:not(.is-clearable) {
    .suffix {
      padding: var(
        --form-control-size-sm-padding,
        var(--INTERNAL_form-control-size-sm-padding)
      );
    }
  }
}

%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)
  );

  > input {
    padding: var(
      --form-control-size-md-padding,
      var(--INTERNAL_form-control-size-md-padding)
    );
    border-radius: var(
      --form-control-size-md-border-radius,
      var(--INTERNAL_form-control-size-md-border-radius)
    );
  }

  .prefix {
    padding: var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      )
      0
      var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      )
      var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      );
  }

  .suffix {
    padding: var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      )
      var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      )
      var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      )
      0;
  }

  .clear-button {
    padding: var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      )
      var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      )
      var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      )
      0;
  }

  &:not(.is-clearable) {
    .suffix {
      padding: var(
        --form-control-size-md-padding,
        var(--INTERNAL_form-control-size-md-padding)
      );
    }
  }
}

%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)
  );

  > input {
    padding: var(
      --form-control-size-lg-padding,
      var(--INTERNAL_form-control-size-lg-padding)
    );
    border-radius: var(
      --form-control-size-lg-border-radius,
      var(--INTERNAL_form-control-size-lg-border-radius)
    );
  }

  .prefix {
    padding: var(
        --form-control-size-lg-padding,
        var(--INTERNAL_form-control-size-lg-padding)
      )
      0
      var(
        --form-control-size-lg-padding,
        var(--INTERNAL_form-control-size-lg-padding)
      )
      var(
        --form-control-size-lg-padding,
        var(--INTERNAL_form-control-size-lg-padding)
      );
  }

  .suffix {
    padding: var(
        --form-control-size-lg-padding,
        var(--INTERNAL_form-control-size-lg-padding)
      )
      var(
        --form-control-size-lg-padding,
        var(--INTERNAL_form-control-size-lg-padding)
      )
      var(
        --form-control-size-lg-padding,
        var(--INTERNAL_form-control-size-lg-padding)
      )
      0;
  }

  .clear-button {
    padding: var(
        --form-control-size-lg-padding,
        var(--INTERNAL_form-control-size-lg-padding)
      )
      var(
        --form-control-size-lg-padding,
        var(--INTERNAL_form-control-size-lg-padding)
      )
      var(
        --form-control-size-lg-padding,
        var(--INTERNAL_form-control-size-lg-padding)
      )
      0;
  }
}

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

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

// https://stackoverflow.com/questions/262158/disabled-input-text-color-on-ios
%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));
  -webkit-text-fill-color: var(
    --form-control-font-color-disabled,
    var(--color-text-disabled)
  );
  opacity: 1;

  &:hover {
    cursor: not-allowed;
  }
}

.text-input-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)
  );

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

  // border and background is set on the text-input-wrapper
  > input {
    box-sizing: border-box;
    display: flex;
    transition-duration: 300ms;
    transition-property: border, background-color;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
    border: none;
    background-color: transparent;
    width: 100%;
    line-height: var(--form-control-line-height, var(--size-line-height-input));
    color: var(--color-text-contrast);

    &::placeholder {
      opacity: 1;
      color: var(--color-text-placeholder);
    }

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

  &.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-background-color-error,
      var(--color-background-form-control-error)
    );

    &:focus-within {
      background-color: var(--color-background-form-control);
    }

    input:focus {
      outline: none;
      background-color: transparent;
    }
  }

  //Necessary so that inset shadow that we use for border does not get covered by child elements.
  &:not(.error) {
    > * {
      &:focus,
      &.disabled {
        &:not(input) {
          box-shadow: inset 0 1px 0 0
              var(
                --form-control-box-shadow-focus,
                var(--INTERNAL_form-control-box-shadow-focus)
              ),
            inset 0 -1px 0 0 var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
        }
      }
    }
  }

  &:focus-within {
    outline: none;
    box-shadow: var(
        --form-control-box-shadow-focus,
        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)
        );
  }

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

  // Reset default button styles
  .clear-button {
    transition-duration: 0.2s;
    transition-property: color;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: pointer;
    color: var(--color-text-body-tertiary);
    font-style: inherit;

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

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