@import "../ui.vars.less";
[sc-input],
sc-text-input,
sc-phone-input,
sc-currency-input,
sc-number-input,
sc-birthday-input,
sc-percent-input,
sc-password-input {
  display: block;
  position: relative;

  [input-label] {
    position:  absolute;
    top: calc(50% - 10px);
    left:  16px;
    opacity:  0;
    transition:  all .3s ease;
  }

  [input-field]:not(:placeholder-shown) {
    padding:  28px 12px 8px 16px;
  }

  [input-field]:not(:placeholder-shown) + [input-label] {
    transform:  translateY(-10px);
    opacity:  1;
    color: @scText;
    font-size: @caption;
    z-index: 2;
  }

  [input-field] {
    position: relative;
    font-size: @body-2;
    width: 100%;
    height: 48px !important;
    outline: none;
    box-sizing:  border-box;
    transition:  all .3s linear;
    z-index: 1;
    &:focus {
      box-shadow: 0 0 0 3px @Huckleberry_000;
      border: 1px solid @Huckleberry_500;
    }
    &[invalid] {
      border: 1px solid @scNegative;
    }
  }

  [no-placeholder] {
    padding:  8px 2px 8px 16px !important;
  }

  input:required {
    box-shadow: none;
  }
  &[disabled] {
      cursor: not-allowed!important;
      pointer-events:none;
      color: @text-300;
      background-color: @scBackground;
      & input, span, fa-icon {
          color: @text-300;
      }
  }
}