@mixin field-container {
  display: block;
  margin: var(--input-gap-outer);
  line-height: 1.5em;
  label,
  template {
    display: block;
  }
}

@mixin error-state {
  color: var(--input-error-color);
  --input-hint-color: var(--input-error-color);

  .control {
    --input-border-color: var(--input-error-color);
    border-color: var(--input-error-color);
  }
}

@mixin icon-paddings {
  &.has-icon-after,
  &.readonly {
    .control-wrapper {
      .control {
        padding-right: calc(var(--input-icon-size) + (2 * var(--input-gap-inner)));
      }
    }
  }
  &.has-icon-before {
    .control-wrapper {
      .control {
        padding-left: calc(var(--input-icon-size) + (2 * var(--input-gap-inner)));
      }
    }
  }
}

@mixin disabled-state {
  .control {
    color: var(--input-text-disabled-color);
    background-color: var(--input-bg-disabled-color);
    &:focus-visible,
    &:focus-within {
      box-shadow: none;
      outline: none;
    }
  }
}

@mixin presuf-common {
  .control-wrapper {
    display: flex;
    flex-direction: column;
  }
  .presuf {
    display: block;
    background: var(--input-presuf-bg);
    color: var(--input-presuf-text-color);
    padding: var(--input-presuf-padding);
    border: var(--input-border);
    line-height: 1;
    word-break: break-word;
  }
  .control-icon {
    top: auto;
    bottom: var(--input-padding-y);
    @include tablet {
      top: var(--input-padding-y);
      bottom: auto;
    }
  }
  @include tablet {
    .control-wrapper {
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
    }
    .presuf {
      flex: 1;
      width: auto;
      max-width: 45%;
      white-space: nowrap;
      display: inline-flex;
      align-items: flex-start;
      line-height: 1.5em;
    }
    .control {
      min-width: 55%;
    }
  }
}

@mixin prefix {
  .control {
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    @include tablet {
      border-top-right-radius: var(--input-radius);
      border-bottom-left-radius: 0;
    }
  }
  .prefix {
    border-top-left-radius: var(--input-radius);
    border-top-right-radius: var(--input-radius);
    border-bottom: none;
    @include tablet {
      border-bottom: var(--input-border);
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-left-radius: var(--input-radius);
    }
  }
}

@mixin prefix-icon {
  @include tablet {
    .prefix {
      padding-inline-start: calc(2 * var(--input-gap-inner) + 1.5em);
    }
    .control {
      padding-inline-start: var(--input-gap-inner);
    }
  }
}

@mixin suffix {
  .control {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    @include tablet {
      border-bottom-left-radius: var(--input-radius);
      border-top-right-radius: 0;
    }
  }
  .suffix {
    border-bottom-left-radius: var(--input-radius);
    border-bottom-right-radius: var(--input-radius);
    border-top: none;
    @include tablet {
      border: var(--input-border);
      border-left: none;
      border-bottom-left-radius: 0;
      border-top-right-radius: var(--input-radius);
    }
  }
  .control-icon {
    top: var(--input-padding-y);
    bottom: auto;
    transform: none;
  }
}

@mixin suffix-icon {
  @include tablet {
    .suffix {
      padding-inline-end: calc(2 * var(--input-gap-inner) + 1.5em);
    }
    .control {
      padding-inline-end: var(--input-gap-inner);
    }
  }
}

@mixin control-icon {
  position: absolute;
  top: var(--input-padding-y);
  right: var(--input-gap-inner);
  width: var(--input-icon-size);
  height: var(--input-icon-size);
  &.icon-before {
    right: auto;
    left: var(--input-gap-inner);
  }
  svg {
    fill: currentColor;
  }
  > * {
    width: 100%;
  }
}

@mixin hint {
  color: var(--input-hint-color);
  line-height: 1;
  font-size: var(--input-hint-font-size);
  &:last-child {
    margin-bottom: 0;
  }
}

@mixin label {
  font-size: var(--input-label-font-size);
  font-weight: var(--input-label-font-weight);
  line-height: 1;
}

@mixin error-msg {
  margin-top: var(--input-gap-inner);
}

@mixin field-control {
  width: 100%;
  overflow: hidden;
  border: var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-control-padding);
  min-height: calc(2 * var(--input-padding-y) + 1.5em + 2px);
  outline-color: var(--input-border-color);
  background: var(--input-bg);
  color: var(--input-fg);
  @include transition(outline-offset, outline-color);
  outline-color: transparent;
  outline-offset: 2em;
  &:focus-visible,
  &:focus-within {
    @include field-control-focus;
  }
}

@mixin field-control-focus {
  --go-focus-outline-offset: calc(-1 * var(--go-focus-outline-width));
  box-shadow: var(--input-focus-shadow);
  @include focus-outline;
}

@mixin label-wrapper {
  display: grid;
  gap: var(--input-gap-inner);
  margin-bottom: var(--input-gap-inner);
}