@import '../shared/formfields.module.scss';

.text-field {
  @extend %form-field;
}

.header {
  padding: ru(.5) ru(1);

  border-bottom: $border;
}

.label-wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.icon-lock {
  width: ru(.75);
  height: ru(.75);
  margin-left: auto;
}

.icon-search {
  width: ru(.75);
  height: ru(.75);
  margin-left: ru(.75);
}

.label {
  @extend %label;
  padding: 0;
}

.input {
  @extend %field;
  @include placeholder();
  width: 100%;
  color: color('primary-3');
  padding-left: ru(1);
  padding-right: ru(1);
  font-weight: 400;
  text-overflow: ellipsis;
}

.tooltip {
  margin-left: auto;
}

.tooltip-icon {
  @extend %tooltip-icon;
}

.input-tooltip {
  position: absolute;
  right: ru(0.5);
  bottom: ru(0);
}

.input-wrapper {
  position: relative;
}

@mixin text-field-fix() {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  padding: ru(.5) ru(1);
  text-align: center;
  background-color: color('neutral-5');
  color: color('primary-3');
}

.prefix {
  display: flex;

  &:before {
    @include text-field-fix();
    content: attr(data-prefix);
    border-right: 1px solid color('neutral-4');
  }
}

.swiftype-prefix {
  display: flex;
  align-items: center;
}

.postfix {
  display: flex;

  &:after {
    @include text-field-fix();
    content: attr(data-postfix);
    border-left: 1px solid color('neutral-4');
  }
}

input[type='text'] {
  outline: none;
}

/* --  state:focus  -- */
.focused {
  @extend %focused;
}

/* --  state:error  -- */
.hasError {
  @extend %hasError;
}