@include export-module('cc-input-text-layout') {
  .co-input-text {
    display: block;
    font-family: $cc-co-input-text-font-family;
    font-size: $cc-co-input-text-font-size;

    label {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    input, .input-text-formatted {
      visibility: hidden;
      max-width: 100%;
      font-family: $cc-co-input-text-font-family;
      font-size: $cc-co-input-text-font-size;
      &.center {
        text-align: center;
      }
      &.right {
        text-align: right;
      }
      &.show {
        visibility: visible;
      }
    }

    .input-input-hidden { // positioned way of so it looks hidden
      position: absolute;
      top: -200px;
      opacity: 0;
    }

    input[type=date]::-webkit-calendar-picker-indicator {
      display: none;
    }

    .input-text-clear-button {
      display: flex;
      visibility: hidden;
      cursor: pointer;
      height: $cc-input-clear-icon-size;
      width: $cc-input-clear-icon-size;
      align-self: end;
      padding: $cc-input-clear-icon-padding;
      position: absolute;
      right: 0;
      &.show {
        visibility: visible;
      }
    }

    &.hide-arrows {
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      input[type=number] {
        -moz-appearance: textfield;
      }
    }

    &.required.invalid {
      background-color: $cc-color-validation-error-background !important;
    }
  }

  .co-input-text:not(.no-style) {
    @include input;
    .input-text-left-icon, .input-text-right-icon {
      cursor: pointer;
      height: 100%;
      width: auto;
      aspect-ratio: 1;
      max-height: $cc-co-input-text-icon-max-height;
      max-width: $cc-co-input-text-icon-max-height;
      svg {
        height: $cc-co-input-text-icon-size;
        width: $cc-co-input-text-icon-size;
      }
    }
    .spacer {
      height: 100%;
      min-width: $cc-co-input-text-spacer-width;
      background-color: $cc-co-input-text-spacer-color;
    }
    .input-text-wrapper {
      display: flex;
      height: 100%;
    }
    .input-wrapper {
      display: flex;
      flex-basis: 100%;
      position: relative;
    }
    input, .input-text-formatted {
      border: none;
      outline: none;
      padding: $cc-input-input-padding;
      align-self: end;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 100%;
      min-height: $cc-co-input-text-input-height;
    }
    .input-content-wrapper {
      width: 100%;
      padding: $cc-input-content-padding;
    }
    &.has-left-icon {
      .input-text-left-icon {
        border-radius: $cc-input-border-radius 0 0 $cc-input-border-radius;
      }
      &:not(.has-right-icon) {
        .input-wrapper {
          border-radius: 0 $cc-input-border-radius $cc-input-border-radius 0;
        }
      }
    }
    &.has-right-icon {
      .input-text-right-icon {
        border-radius: 0 $cc-input-border-radius $cc-input-border-radius 0;
      }
      &:not(.has-left-icon) {
        .input-wrapper {
          border-radius: $cc-input-border-radius 0 0 $cc-input-border-radius;
        }
      }
    }
  }
}

