@jetbrains/ring-ui/components/input/input.css

@import "../global/variables.css";

@value unit from "../global/global.css";

.container {
  composes: font-lower from  "../global/global.css";

  position: relative;

  box-sizing: border-box;
  min-height: calc(unit * 8);
  padding-top: calc(unit * 2);

  & * {
    box-sizing: border-box;
  }
}

.borderless {
  min-height: calc(unit * 4);
  padding: 0;
}

.input {
  width: 100%;
  min-height: calc(unit * 4);
  padding: 0;

  border: none;
  outline: none;
  background: transparent;

  font: inherit;
  caret-color: var(--ring-main-color);

  @nest .clearable & {
    padding-right: calc(unit * 3);

    @nest [dir=rtl] & {
      padding-right: 0;
      padding-left: calc(unit * 3);
    }
  }

  @nest .light & {
    color: var(--ring-text-color);
  }

  @nest .dark & {
    color: var(--ring-dark-text-color);
  }

  &::placeholder {
    color: transparent;
  }

  &[disabled] {
    color: var(--ring-disabled-color);
  }

  /*
    Kill yellow webkit autocomplete
    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
  */
  &:-webkit-autofill {
    &,
    &:hover,
    &:focus {
      transition: background-color 50000s ease-in-out 0s;
    }

    & ~ .label {
      top: calc(unit / 2);

      font-size: var(--ring-font-size-smaller);
    }
  }

  /* if you need a cross, pass onClear prop */
  &::-ms-clear {
    display: none;
  }
}

.clear {
  position: absolute;
  top: 17px;

  right: 0;

  padding-right: 0;

  @nest .empty & {
    display: none;
  }

  @nest .borderless & {
    top: 0;
  }

  @nest [dir=rtl] & {
    right: auto;
    left: 0;
  }
}

/* override Button */
.clear.clear {
  line-height: calc(unit * 4);
}

textarea.input {
  overflow: hidden;

  box-sizing: border-box;
  padding-top: unit;

  resize: none;
}

.label {
  position: absolute;
  top: calc(unit * 3 - 3px);
  left: 0;

  transition: transform var(--ring-fast-ease), color var(--ring-fast-ease);
  transform-origin: top left;
  pointer-events: none;

  @nest .light & {
    color: var(--ring-secondary-color);
  }

  @nest .dark & {
    color: var(--ring-dark-secondary-color);
  }
}

.input:focus ~ .label,
.container.active > .label,
.container:not(.empty) > .label {
  transform: translateY(calc(unit * -2 - 1px)) scale(calc(12 / 13));
}

.noLabel ::placeholder,
.input:focus::placeholder {
  transition: color var(--ring-fast-ease);
}

.light.noLabel ::placeholder,
.light :focus::placeholder {
  color: var(--ring-disabled-color);
}

/* stylelint-disable-next-line selector-max-specificity */
.dark.noLabel ::placeholder,
/* stylelint-disable-next-line selector-max-specificity */
.dark :focus::placeholder {
  color: var(--ring-secondary-color);
}

.input:focus ~ .label {
  color: var(--ring-main-color);
}

.error > :focus ~ .label {
  color: var(--ring-error-color);
}

.underline {
  height: 1px;

  border-bottom-width: 1px;
  border-bottom-style: solid;

  @nest .light & {
    border-color: var(--ring-line-color);
  }

  @nest .dark & {
    border-color: var(--ring-dark-line-color);
  }
}

.input[disabled] ~ .underline {
  border-bottom-style: dashed;
}

.focusUnderline,
.errorUnderline {
  width: 100%;
  height: 2px;

  transform: scaleX(0);
  transform-origin: top left;
}

.focusUnderline {
  margin-top: -1px;

  background: var(--ring-main-color);
}

.errorUnderline {
  margin-top: -2px;

  background: var(--ring-icon-error-color);

  @nest .dark & {
    background: var(--ring-error-color);
  }
}

.input:focus ~ .focusUnderline,
.container.active > .focusUnderline,
.error > .errorUnderline {
  transition: transform 0.15s ease-out;
  transform: scaleX(1);
}

.errorText {
  overflow: hidden;

  box-sizing: border-box;
  height: 0;
  padding: calc(unit / 2) 0 unit;

  transition: height 0.3s ease-out;

  color: var(--ring-error-color);

  font-size: var(--ring-font-size-smaller);
  line-height: var(--ring-line-height-lowest);
}

.sizeS {
  width: calc(unit * 12);
}

.sizeM {
  width: calc(unit * 30);
}

.sizeL {
  width: calc(unit * 50);
}

.sizeFULL {
  width: 100%;
}