@use '../../sass/variables' as *;

/* Style Placeholders */
::placeholder {
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 75%, transparent);
  opacity: 1;
}

/* Text inputs */
input:not([type]):not(.browser-default),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=month]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
  outline: none;
  color: var(--md-sys-color-on-background);
  width: 100%;
  font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
  height: 56px; // 56dp
  background-color: transparent;
}

%invalid-input-style {
  border-bottom: 2px solid var(--md-sys-color-error);
  box-shadow: 0 1px 0 0 var(--md-sys-color-error);
}

%hidden-text > span {
  display: none
}

%custom-error-message {
  content: attr(data-error);
  color: var(--md-sys-color-error);
}

// Shared helper/error text also supports controls outside .input-field.
.supporting-text {
  display: block;
  font-size: 12px;
  line-height: 16px;
  margin: 4px 0 0;

  &:has(> .material-icons) {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }

  &[hidden] { display: none; }

  > .material-icons {
    flex: 0 0 16px;
    font-size: 16px;
    line-height: 16px;
  }
}

.input-field {
  --input-color: var(--md-sys-color-primary);

  position: relative;
  clear: both;

  // Default

  input:not([type=checkbox]):not([type=radio]), textarea {
    box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
    padding: 0 16px;
    // padding-top: 20px;
    //background-color: transparent; //background-color: var(--md-sys-color-surface);
    border: none; // reset
    border-radius: 4px; // md.sys.shape.corner.extra-small.top
    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    &:focus:not([readonly]) {
      border-bottom: 2px solid var(--input-color);
      padding-top: 20px + 1px; // add border-width
    }

    &:disabled, &[readonly="readonly"] {
      color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
      border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
      background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 4%);
    }

    // Label
    &:focus:not([readonly]) + label {
      color: var(--input-color);
    }
    &:focus:not([readonly]) + label,
    &:not([placeholder=' ']) + label,
    &:not(:placeholder-shown) + label {
      //font-size: 12px; // md.sys.typescale.body-small.size
      // https://stackoverflow.com/questions/34717492/css-transition-font-size-avoid-jittering-wiggling
      transform: scale(calc(12 / 16));
      top: 8px;
      /// Use the available width after the floating-label scale is applied.
      max-width: calc((100% - 32px) / 0.75);
    }

    &:disabled + label, &[readonly="readonly"] + label {
      color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
    }

    // Hide helper text on data message
    &.invalid ~ .supporting-text[data-error] {
      @extend %hidden-text;
    }

    // Invalid Input Style
    &.invalid {
      @extend %invalid-input-style;
    }

    // Custom Error message
    &.invalid ~ .supporting-text:after {
      @extend %custom-error-message;
    }

    &.invalid ~ label,
    &:focus.invalid ~ label {
      color: var(--md-sys-color-error);
    }
  }

  input::placeholder {
    user-select: none;
  }

  & > label {
    color: var(--md-sys-color-on-surface-variant);
    user-select: none;
    font-size: 16px;
    position: absolute;
    left: 16px;
    top: 16px;
    cursor: text;
    transform-origin: top left;
    /// Keep long labels on one line so they cannot overlap the input value.
    max-width: calc(100% - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
      left 0.2s ease-out,
      top 0.2s ease-out,
      transform 0.2s ease-out
    ;
  }

  // Sub-Infos

  .supporting-text {
    color: var(--md-sys-color-on-surface-variant);
    padding: 0 16px;
  }

  .character-counter {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
    float: right;
    padding: 0 16px;
    margin-top: 4px;
  }

  .prefix {
    position: absolute;
    left: 12px;
    top: 16px;
    user-select: none;
    display: flex;
    align-self: center;
  }

  .suffix {
    position: absolute;
    right: 12px;
    top: 16px;
    user-select: none;
  }

  .prefix ~ input:not([type=checkbox]):not([type=radio]), .prefix ~ textarea {
    padding-left: calc(12px + 24px + 16px);
  }
  // Center the 40px password action within the 56px field.
  :is(crazy-button, regular-btn).suffix[data-password-toggle-icon] {
    top: 8px;
    right: 4px;

    > .btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;

      &::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: currentColor;
        opacity: 0;
        pointer-events: none;
      }

      &:hover:not(:disabled)::before { opacity: .08; }
      &:active:not(:disabled)::before { opacity: .16; }
    }
  }

  .suffix ~ input:not([type=checkbox]):not([type=radio]), .suffix ~ textarea {
    padding-right: calc(12px + 24px + 16px);
  }
  .prefix ~ label {
    left: calc(12px + 24px + 16px);
  }

  // Reserve space beneath an already-floating label even before focus.
  &:not(.outlined) > input:not([type=checkbox]):not([type=radio]):not(:focus):not(:placeholder-shown) {
    padding-top: 20px;
  }

  // Outlined

  // todo: use this approach for floating labels with outline
  // https://dev.to/icyjoseph/use-more-html-elements-floating-from-field-37o9

  &.outlined {

    input:not([type=checkbox]):not([type=radio]), textarea {
      padding-top: 0;
      background-color: transparent; //(--md-sys-color-background);
      border: 1px solid var(--md-sys-color-on-surface-variant);
      border-radius: 4px; // md.sys.shape.corner.extra-small

      &:focus:not([readonly]) {
        border: 2px solid var(--input-color);
        padding-top: 0;
        margin-left: -1px; // subtract border-width

      }

      // Label
      &:focus:not([readonly]) + label {
        color: var(--input-color);
      }
      &:focus:not([readonly]) + label,
      &:not([placeholder=' ']) + label,
      &:not(:placeholder-shown) + label {
        top: -8px;
        left: 16px;
        margin-left: -4px;
        padding: 0 4px;
        // A solid chip behind the label masks the border line running
        // through the text, giving the classic outlined-field notch cut.
        // Transparent (the old value) let the border show straight through.
        background-color: var(--md-sys-color-surface);
      }

      &:disabled, &[readonly="readonly"] {
        color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
        border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
      }
    }
  }

  // Error
  &.error {
    // ".error" alone is also the MD3 color-token utility class (a solid
    // error-colored background). Reset it here so a "error" state modifier
    // on an .input-field doesn't paint the whole container red - only the
    // border/label/text below should pick up the error color.
    background-color: transparent;

    input:not([type=checkbox]):not([type=radio]), textarea {
      border-color: var(--md-sys-color-error);
    }
    input:focus:not([readonly]), textarea:focus:not([readonly]) {
      border-color: var(--md-sys-color-error);
    }
    input:focus:not([readonly]) + label, textarea:focus:not([readonly]) + label {
      color: var(--md-sys-color-error);
    }
    label {
      color: var(--md-sys-color-error);
    }
    .supporting-text {
      color: var(--md-sys-color-error);
    }
    .suffix {
      color: var(--md-sys-color-error);
    }
  }
}

/* Inline */
.inline {
  display: inline-block;
}

/* Search Field */
.searchbar {
  .prefix {
    position: absolute;
    padding-left: 1rem;
    top: 0;
    user-select: none;
    display: flex;
    align-self: center;
  }

  & > input {
    border-width: 0;
    background-color: transparent;
    padding-left: 3rem;
  }
}
.searchbar.has-sidebar {
  margin-left: 0;
  @media #{$large-and-up} {
    margin-left: 300px;
  }
}

/*
.input-field input[type=search] {
  display: block;
  line-height: inherit;

  .nav-wrapper & {
    height: inherit;
    padding-left: 4rem;
    width: calc(100% - 4rem);
    border: 0;
    box-shadow: none;
  }
  &:focus:not(.browser-default) {
    border: 0;
    box-shadow: none;
  }
  & + .label-icon {
    transform: none;
    left: 1rem;
  }
}
*/

/* Textarea */
// Default textarea
textarea {
  width: 100%;
  height: 3rem;
  background-color: transparent;

  &.materialize-textarea {
    padding-top: 26px !important;
    padding-bottom: 4px !important;
    line-height: normal;
    overflow-y: hidden; /* prevents scroll bar flash */
    resize: none;
    min-height: 3rem;
    box-sizing: border-box;
  }
}

// Outlined labels sit in the border, so the text needs equal vertical insets.
.input-field.outlined textarea.materialize-textarea {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

// For textarea autoresize
.hiddendiv {
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
  // Reduces repaints
  position: absolute;
  top: 0;
  z-index: -1;
}

/* Autocomplete Items */
.autocomplete-content {
  li {
    .highlight {
      color: var(--md-sys-color-on-background);
    }

    img {
      height: $dropdown-item-height - 10;
      width: $dropdown-item-height - 10;
      margin: 5px 15px;
    }
  }
}

/* Datepicker date input fields */
.datepicker-date-input {
  position: relative;
  text-indent: -9999px;

  &::after {
    display: block;
    position: absolute;
    top: 1.10rem;
    content: attr(data-date);
    color: var(--input-color);
    text-indent: 0;
  }

  &:focus-visible {
    text-indent: 0;
  }

  &:focus-visible:after {
    text-indent: -9999px;
  }
}

// Native legend cuts a real notch: no background-color patch is needed.
.input-field.outlined.has-outlined-notch,
.input-field.outlined > .select-wrapper.has-outlined-notch {
  > input:not([type=checkbox]):not([type=radio]), > textarea {
    border-color: transparent;
    &:focus:not([readonly]), &:disabled, &[readonly] { border-color: transparent; }
    + label,
    &:focus:not([readonly]) + label { background-color: transparent; }
  }
  > .input-outline {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--md-sys-color-on-surface-variant);
    border-radius: 4px;
    background: transparent;
    > legend {
      float: none;
      width: auto;
      display: block;
      max-width: 0.01px;
      height: 16px;
      padding: 0;
      font: inherit;
      font-size: 12px;
      line-height: 16px;
      visibility: hidden;
      white-space: nowrap;
      overflow: hidden;
      > span { display: inline-block; padding: 0 3px; }
    }
  }
  > input:focus:not([readonly]) ~ .input-outline,
  > textarea:focus:not([readonly]) ~ .input-outline {
    border-width: 2px;
    border-color: var(--input-color);
    padding-inline: 11px;
  }
  > :is(input, textarea):is(:focus:not([readonly]), :not([placeholder=' ']), :not(:placeholder-shown)) ~ .input-outline > legend {
    max-width: 100%;
  }
  > :is(input, textarea):is(:disabled, [readonly]:not(.select-dropdown)) ~ .input-outline {
    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
  }
  > :is(input, textarea).invalid ~ .input-outline,
  &.error > .input-outline { border-color: var(--md-sys-color-error); }
}

// Explicitly authored copy buttons; no button is generated for ordinary inputs.
.input-field {
  > button.suffix.input-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    top: 8px;
    right: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    z-index: 1;
    > i { margin: 0; font-size: 24px; line-height: 1; }
    &:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
    &:focus-visible { outline: 2px solid var(--input-color); outline-offset: 2px; }
    &:disabled { opacity: .38; cursor: default; }
  }
  &:has(> .input-copy-button) > input:not([type=checkbox]):not([type=radio]),
  &:has(> .input-copy-button) > textarea { padding-right: 56px; }
}
.input-copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.autocomplete-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  &[hidden] { display: none; }
  .autocomplete-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    border-radius: 8px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      min-height: 28px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font-size: 20px;
      &:focus-visible { outline: 2px solid currentColor; }
    }
  }
}

// FormSelect owns the outline inside its generated wrapper.
.input-field.outlined.error > .select-wrapper > .input-outline {
  border-color: var(--md-sys-color-error);
}
.input-field.error > .select-wrapper > label,
.input-field.error > .select-wrapper:focus-within > label {
  color: var(--md-sys-color-error);
}