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

/* Style Placeholders */
::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

/* 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);
}

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

  position: relative;
  clear: both;

  // Default

  input, 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;
    }

    &: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;
    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);
    font-size: 12px;
    padding: 0 16px;
    margin-top: 4px;
  }

  .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, .prefix ~ textarea {
    padding-left: calc(12px + 24px + 16px);
  }
  .suffix ~ input, .suffix ~ textarea {
    padding-right: calc(12px + 24px + 16px);
  }
  .prefix ~ label {
    left: calc(12px + 24px + 16px);
  }

  // Outlined

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

  &.outlined {

    input, 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;
        background-color: transparent; //var(--md-sys-color-background);
      }

      &: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 {
    input, 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;
  }
}

// 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;
  }
}