/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */


.Input {
  position: relative;
  text-align: left;

  &.invalid.dirty:not(.validating) {
    label {
      border-color: var(--colorSoftError);
    }
  }

  label {
    position: relative;
    background: var(--inputControlBackground);
    border-radius: $radius;
    border: 1px solid var(--inputControlBorder);
    color: var(--textColorTertiary);
    padding: var(--padding);

    &:hover {
      border-color: var(--inputControlHoverBorder);
    }

    &:focus-within {
      border-color: var(--colorInfo);
    }

    &:after {
      display: none;
    }
  }

  &.validatingLine {
    label:after {
      display: block;
      width: 100%;
      @include stripeLinesAnimation;
    }
  }

  &.lightTheme {
    label {
      background: #f6f6f7; /* inputControlBackground from light theme */
      border-color: #cccdcf; /* inputControlBorder from light theme */
    }
  }

  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none; // hide browser controls (top/bottom arrows)
  }

  input, textarea {
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-transform: inherit;

    &:invalid {
      box-shadow: none;
    }

    &::placeholder {
      color: inherit;
      opacity: .75;
    }
  }

  textarea {
    @include hidden-scrollbar;
    line-height: 1.2;
    resize: none;
  }

  fieldset:disabled &,
  &.disabled {
    opacity: .5;
    pointer-events: none;
  }

  .input-info {
    .errors {
      color: var(--colorError);
      font-size: $font-size-small;
    }

    .maxLengthIndicator {
      text-align: right;
      font-size: 80%;
      padding: $padding * 0.33333;
    }
  }
}

.Tooltip.InputTooltipError {
  --bgc: var(--colorError);
  --border: none;
  --color: white;
}