@mixin input() {
  display: block;
  position: relative;
  background: $cc-color-input-background-color;
  border-radius: $cc-input-border-radius;
  &:before {
    content: '';
    box-shadow: inset 0 0 0 $cc-input-border-width $cc-input-border-color;
    border-radius: $cc-input-border-radius;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .required-indicator {
    display: none;
    position: absolute;
    background: transparent;
    top: $cc-input-required-mark-position-top;
    right: $cc-input-required-mark-position-right;
    pointer-events: none;
    &:before {
      display: flex;
      align-items: center;
      justify-content: center;
      content: "\2713";
      width: $cc-input-required-mark-width-height;
      height: $cc-input-required-mark-width-height;
      background: transparent;
      color: $cc-color-valid;
    }
  }
  &:not(.custom-height) {
    height: $cc-item-size;
    //padding: 0 0 7px 5px;
  }
  &.required {
    .required-indicator {
      display: flex;
    }
    &.invalid, &:not(.hasvalue) {
      .required-indicator:before {
        content: "\002A";
        color: $cc-color-error;
      }
    }
  }
  &.has-own-label {
    label {
      width: 100%;
      text-align: left;
      color: $cc-color-label;
      margin-left: $cc-input-margin-left;
      font-size: $cc-font-size-input-label;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      transform-origin: top left;
      pointer-events: none;
      z-index: 1;
      transition: all .2s;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    @if $cc-input-show-focus-line != false {
      &.cc-input-focused:not(.no-focus-line) {
        @include focus($cc-input-focused-border-style, $cc-input-focused-border-width, $cc-input-focused-border-color, $cc-input-border-radius);
      }
    }
    &.cc-input-focused, &.hasvalue {
      label {
        transform: scale(0.92);
        top: $cc-input-label-top;
      }
    }
  }
  &:not(.read-only):not(.no-hover-line):hover {
    @include hover($cc-input-border-hover-style, $cc-input-border-hover-width, $cc-input-border-hover-color, $cc-input-border-radius);
  }
}

@mixin focus($style, $width, $color, $radius) {
  border-style: $style;
  border-width: 0; // $width;
  border-color: $color;
  &:before {
    content: '';
    box-shadow: inset 0 0 0 $width $color;
    border-radius: $radius;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

@mixin hover($style, $width, $color, $radius) {
  border-style: $style;
  border-width: 0; // $width;
  border-color: $color;
  &:before {
    content: '';
    box-shadow: inset 0 0 0 $width $color;
    border-radius: $radius;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

@mixin noBorderHover() {
  &:before {
    box-shadow: none;
  }
  &:hover {
    border: none;
    &:before {
      box-shadow: none;
    }
  }
  &:focus {
    border: none;
    &:before {
      box-shadow: none;
    }
  }
}

.co-input-text.form-submitted.invalid.required:not(.hasvalue) {
  .input-text-wrapper {
    background-color: $cc-color-validation-error-background;
  }
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: $cc-color-input-placeholder-color;
  font-style: $cc-input-placeholder-font-style;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: $cc-color-input-placeholder-color;
  font-style: $cc-input-placeholder-font-style;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: $cc-color-input-placeholder-color;
  font-style: $cc-input-placeholder-font-style;
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder {@content}
  ::-moz-placeholder {@content}
  :-ms-input-placeholder {@content}
}
