@import "./form";

.cobalt- {
  &TextField {
    $self: &;

    @include form-field-container;

    position: relative;

    &__Icon {
      @include semantic-color(icon, base, fill);
      position: absolute;
      top: 0;
      @apply c-left-xs;

      height: 100%;
      display: flex;

      .cobalt-Icon {
        transition: fill 150ms ease-in-out;
      }
    }

    &__Input[type] {
      @include form-input-base($self);

      &::placeholder {
        @apply c-text-subdued;
        opacity: 0.7;
      }
    }

    &--withIcon {
      #{ $self }__Input {
        padding-left: 40px;
      }

      #{ $self }__Input + #{ $self }__Icon {
        @include semantic-color(icon, accent, fill);
        pointer-events: none;
      }

      #{ $self }__Input:placeholder-shown + #{ $self }__Icon {
        @include semantic-color(icon, subdued, fill);
        opacity: 0.7;
      }

      #{ $self }__Input:focus + #{ $self }__Icon,
      #{ $self }__Input:focus:placeholder-shown + #{ $self }__Icon {
        @include semantic-color(icon, accent, fill);
      }

      #{ $self }__Input:disabled + #{ $self }__Icon {
        @include semantic-color(icon, subdued, fill);
        opacity: 0.7;
      }
    }
  }
}