@mixin text-field-base {
  all: unset;
  border-radius: 4px 4px 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--tds-text-field-color);
  background-color: var(--tds-text-field-background);

  &::placeholder {
    color: var(--tds-text-field-placeholder);
  }

  &:disabled {
    user-select: none;
    pointer-events: none;
    background-color: var(--tds-text-field-background-disabled);
    color: var(--tds-text-field-color-disabled);

    &::placeholder {
      color: var(--tds-text-field-placeholder-disabled);
    }

    ~ .text-field-label-inside {
      color: var(--tds-text-field-label-disabled);
    }
  }
}

//Sizes
.text-field-input-lg {
  @include text-field-base;

  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
}

.text-field-input-md {
  @include text-field-base;

  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  padding: var(--tds-spacing-element-16);
}

.text-field-input-sm {
  @include text-field-base;

  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  padding: var(--tds-spacing-element-16);
}

//Container for input field and prefix/suffix
.text-field-container {
  border-radius: 4px 4px 0 0;
  display: flex;
  position: relative;
  height: 56px;
  box-sizing: border-box;
  background-color: var(--tds-text-field-background);
  border-bottom: 1px solid var(--tds-text-field-border-bottom);
  transition: border-bottom-color 200ms ease;

  &:hover {
    border-bottom-color: var(--tds-text-field-border-bottom-hover);
  }

  .form-text-field-md & {
    height: 48px;
  }

  .form-text-field-sm & {
    height: 40px;
  }
}

.text-field-input-container {
  position: relative;
  width: 100%;
}

.text-field-data,
.text-field-input {
  color: var(--tds-text-field-data-color);
}

//text-field label

.text-field-label-outside > * {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  display: block;
  margin-bottom: var(--tds-spacing-element-8);
  color: var(--tds-text-field-label-color);
}

.text-field-label-inside {
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  position: absolute;
  pointer-events: none;
  color: var(--tds-text-field-label-inside-color);
  left: 16px;
}

@mixin placeholder-label {
  &::placeholder {
    color: transparent;
  }

  ::placeholder {
    color: transparent;
  }

  //Input field in focus
  &:focus::placeholder {
    transition: color 0.35s ease;
    color: var(--tds-text-field-placeholder);
  }
}

@mixin label-inside-transition {
  transition: 0.1s ease all;
}

//Form control
.form-text-field {
  display: block;
  min-width: 208px;

  &-nomin {
    min-width: auto;
  }
}

//text-field container with label inside
//Handling position, focus and transition for label inside
.form-text-field.text-field-container-label-inside {
  .text-field-input-lg {
    padding-top: var(--tds-spacing-element-24);
    padding-bottom: 15px;

    ~ .text-field-label-inside {
      top: 20px;
    }

    @include placeholder-label;
  }

  .text-field-input-md {
    padding-top: var(--tds-spacing-element-20);
    padding-bottom: 11px;

    ~ .text-field-label-inside {
      top: 16px;
    }

    @include placeholder-label;
  }

  .text-field-input-sm {
    padding-top: var(--tds-spacing-element-20);
    padding-bottom: 11px;

    ~ .text-field-label-inside {
      top: 16px;
    }

    @include placeholder-label;
  }

  &.text-field-focus,
  &.text-field-data {
    .text-field-input-sm ~ .text-field-label-inside {
      font: var(--tds-detail-07);
      letter-spacing: var(--tds-detail-07-ls);

      @include label-inside-transition;

      top: 8px;
    }

    .text-field-input-md ~ .text-field-label-inside {
      font: var(--tds-detail-07);
      letter-spacing: var(--tds-detail-07-ls);

      @include label-inside-transition;

      top: 8px;
    }

    .text-field-input-lg ~ .text-field-label-inside {
      font: var(--tds-detail-07);
      letter-spacing: var(--tds-detail-07-ls);

      @include label-inside-transition;

      top: 12px;
    }
  }
}

//text-field bottom bar when in focus
.text-field-bar {
  position: absolute;
  width: 100%;

  &::before,
  &::after {
    content: '';
    height: 2px;
    top: 54px;
    width: 0;
    position: absolute;
    background: var(--tds-text-field-bar);
    transition: 0.35s ease all;

    .form-text-field-md & {
      top: 46px;
    }

    .form-text-field-sm & {
      top: 40px;
    }
  }

  &::before {
    left: 50%;
  }

  &::after {
    right: 50%;
  }

  .text-field-focus &::before,
  .text-field-focus &::after {
    width: 50%;
  }
}

//Helper text
.text-field-helper {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  display: flex;
  gap: 8px;
  justify-content: space-between;

  & .text-field-textcounter {
    margin-left: auto;
  }

  flex-basis: 100%;
  padding-top: var(--tds-spacing-element-4);
  color: var(--tds-text-field-helper);
}

//Disabled state
.form-text-field-disabled {
  .text-field-container {
    cursor: not-allowed;
    border-bottom-color: transparent;
  }

  .text-field-slot-wrap-prefix,
  .text-field-slot-wrap-suffix {
    > * {
      color: var(--tds-text-field-ps-color-disabled);
    }
  }

  .text-field-label-outside {
    > * {
      color: var(--tds-text-field-label-disabled);
    }
  }

  .text-field-helper {
    color: var(--tds-text-field-helper-disabled);
  }
}

//Read only state

.text-field-icon__readonly {
  display: none;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tds-text-field-icon-read-only-label-color);

  & .tds-tooltip {
    min-width: 150px;
  }
}

.form-text-field-readonly {
  user-select: auto; /* Allow text selection */
  caret-color: transparent; /* Hide blinking cursor */
  cursor: default;

  .text-field-container {
    border-bottom-color: var(--tds-text-field-border-bottom-readonly);
  }

  .text-field-icon__readonly {
    display: block;

    &:hover {
      ~ .text-field-icon__readonly-label {
        display: block;
      }
    }
  }

  .text-field-input {
    background-color: transparent;
  }
}

// Only add padding if the readonly icon is present
.form-text-field-readonly:has(.text-field-icon__readonly) .text-field-input {
  padding-right: 54px;
}

//Success state
.form-text-field-success:not(.form-text-field-readonly) {
  .text-field-container {
    border-bottom-color: var(--tds-text-field-border-bottom-success);
  }
}

//Error State
.form-text-field-error:not(.form-text-field-readonly) {
  .text-field-helper {
    color: var(--tds-text-field-helper-error);
  }

  .text-field-container {
    border-bottom-color: var(--tds-text-field-border-bottom-error);
  }

  .text-field-bar {
    &::before,
    &::after {
      background: var(--tds-text-field-bar-error);
    }
  }
}

// .text-field-textcounter {
.text-field-helper-error-state {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.text-field-textcounter-disabled {
  color: var(--tds-text-field-textcounter-disabled);
}

.text-field-textcounter {
  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  color: var(--tds-text-field-textcounter);
  float: right;

  &.text-field-textcounter-disabled {
    color: var(--tds-text-field-textcounter-disabled);
  }

  &.text-field-textcounter-divider {
    // @include type-style('detail-05');
    color: var(--tds-text-field-textcounter-divider);
  }

  &.text-field-textcounter-divider-disabled {
    color: var(--tds-text-field-textcounter-divider-disabled);
  }
}

.text-field-slot-wrap-prefix,
.text-field-slot-wrap-suffix {
  align-self: center;
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  margin: 0 0 0 14px;
  color: var(--tds-text-field-ps-color);

  &::slotted(:not(tds-icon)) {
    margin: 0 0 0 2px;
  }

  &.text-field-error {
    color: var(--tds-text-field-ps-color-error);
  }
}

.text-field-slot-wrap-suffix {
  margin: 0 14px 0 0;

  &::slotted(:not(tds-icon)) {
    margin: 0 2px 0 0;
  }
}