@use '../../abstract' as *;

$input-text-wrapper: ".input-text-wrapper";

[contentEditable]{
  &.input-text { min-block-size:pxToRem(80); }
  &:empty:not(:focus)::before {
    content:attr(data-text);
  }
}

#{$input-text-wrapper} {
  position:relative;
  $button-size: pxToRem(48);
  --button-size: #{$button-size};
  --amount-of-buttons: 0;
  .input-text,
  input:where(:not([type="datetime-local"])) { padding-inline-end: calc(var(--button-size) * var(--amount-of-buttons)); }
  [type="text"] { min-block-size:pxToRem(22); } /* use for DIV textbox */
  &:where(.is-with-end-button) {
    .button { position:absolute; inset-block:pxToRem(8); inset-inline-end:pxToRem(8); }
  }
  .icon-search {
    position:absolute; inset-inline-start:pxToRem(16); inset-block-start:pxToRem(8);
    font-size:pxToRem(19); pointer-events:none;
  }
  :where(.options-list) {
    position:absolute; inset-block-start:pxToRem(8); inset-inline-end:pxToRem(12);
  }
  .buttons-list {
    --p-bg-input-color: var(--color-neutral-0);
    background-color: hsl(var(--p-bg-input-color));
    #{$theme-dark} & {
      --p-bg-input-color: var(--color-neutral-100);
    }
  }
}

.options-list {
  --p-sep-color: var(--color-neutral-15);
  --p-button-text-color: var(--p-button-text-color-default);
  --p-button-text-color-default: var(--color-neutral-50);
  --p-button-text-color-disabled: var(--color-neutral-15);

  --p-button-bg-color: var(--p-button-bg-color-default);
  --p-button-bg-color-default: var(--transparent);
  --p-button-bg-color-focus: var(--color-neutral-10);

  display:flex;
  &::before { content:""; align-self:center; inline-size:pxToRem(1); block-size:pxToRem(20); background-color:hsl(var(--p-sep-color)); margin-inline-end:pxToRem(12); }
  &-button {
    inline-size:pxToRem(24); block-size:pxToRem(24);
    background-color:hsl(var(--p-button-bg-color)); border-radius:var(--border-radius-xsmall);
    color:hsl(var(--p-button-text-color)); font-size:var(--fon); line-height:pxToRem(24); text-align:center;
    &:disabled {
      --p-button-text-color:var(--p-button-text-color-disabled); cursor:not-allowed;
    }
    &:where(:hover, :focus):not(:disabled) {
      --p-button-bg-color:var(--p-button-bg-color-focus); box-shadow:none;
    }
    &:where(:not(:last-child)) { margin-inline-end:pxToRem(8); }
  }
  &.is-no-separator {
    &::before { display:none; }
  }
  #{$theme-dark} & {
    --p-sep-color: var(--color-neutral-80);
    --p-button-text-color: var(--p-button-text-color-default);
    --p-button-text-color-default: var(--color-neutral-50);
    --p-button-text-color-disabled: var(--color-neutral-80);

    --p-button-bg-color: var(--p-button-bg-color-default);
    --p-button-bg-color-default: var(--transparent);
    --p-button-bg-color-focus: var(--color-neutral-85);
  }

}

.input-text,
[type="text"],
[type="number"],
[type="password"],
[type="email"],
[type="url"],
[type="search"],
[type="tel"],
[type="file"],
[type="date"],
[type="time"],
select,
textarea {
  --p-text-color: var(--p-text-color-default);
  --p-bg-color: var(--p-bg-color-default);
  --p-border-color: var(--p-border-color-default);

  --p-text-color-default: var(--color-neutral-60);
  --p-bg-color-default: var(--color-neutral-0);
  --p-border-color-default: var(--color-neutral-15);

  --p-text-color-hover: var(--p-text-color-default);
  --p-bg-color-hover: var(--p-bg-color-default);
  --p-border-color-hover: var(--color-neutral-20);

  --p-text-color-focus: var(--p-text-color-default);
  --p-bg-color-focus: var(--p-bg-color-default);
  --p-border-color-focus: var(--color-neutral-20);

  --p-text-color-readonly: var(--color-neutral-20);
  --p-bg-color-readonly: var(--color-neutral-5);
  --p-border-color-readonly: var(--p-border-color-default);

  --p-text-color-disabled: var(--color-neutral-20);
  --p-bg-color-disabled: var(--color-neutral-0);
  --p-border-color-disabled: var(--p-border-color-default);


  display:block; inline-size:100%; block-size:pxToRem(40); outline:none;
  padding-block:pxToRem(9.5); padding-inline:pxToRem(12);
  color:hsl(var(--p-text-color)); line-height:1.3572; font-weight:400;
  background-color:hsl(var(--p-bg-color));
  border:solid pxToRem(1) hsl(var(--p-border-color)); border-radius:var(--border-radius-xsmall);
  &:hover {
    &:where(:not(#{$disabled})) {
      --p-border-color:var(--p-border-color-hover);
    }
  }
  /* UnNative textbox element */
  &.is-resizable {
    @include scroll();
    word-break:break-all; min-block-size:auto; max-block-size:pxToRem(200); overflow:auto;
    &:empty { color:hsl(var(--p-placeholder-color)); }
    &:empty::before { content: attr(aria-placeholder); }
  }

  &.is-error          { box-shadow:0 0 0 pxToRem(1) hsl(var(--color-danger-100)), 0 0 0 pxToRem(4)  hsl(var(--color-danger-100) / 0.25); }
  &.is-warning        { box-shadow:0 0 0 pxToRem(1) hsl(var(--color-warning-100)), 0 0 0 pxToRem(4)  hsl(var(--color-warning-100) / 0.25); }
  &.is-success        { box-shadow:0 0 0 pxToRem(1) hsl(var(--color-success-100)), 0 0 0 pxToRem(4)  hsl(var(--color-success-100) / 0.25); }
  &:where(:focus) {
    --p-text-color: var(--p-text-color-focus);
    --p-bg-color: var(--p-bg-color-focus);
    --p-border-color: var(--p-border-color-focus);
    box-shadow: none;
  }
  &:where([readonly], .is-read-only) {
    --p-bg-color:var(--p-bg-color-readonly);
  }
  &:where(#{$disabled}) {
    --p-text-color: var(--p-text-color-disabled);
    --p-bg-color: var(--p-bg-color-disabled);
    --p-border-color: var(--p-border-color-disabled);

    --p-border-color-hover: var(--color-neutral-60);
  }

  #{$theme-dark} & {
    --p-text-color-default: var(--color-neutral-20);
    --p-bg-color-default: var(--color-neutral-100);
    --p-border-color-default: var(--color-neutral-80);

    --p-text-color-hover: var(--p-text-color-default);
    --p-bg-color-hover: var(--p-bg-color-default);
    --p-border-color-hover: var(--color-neutral-70);

    --p-text-color-focus: var(--p-text-color-default);
    --p-bg-color-focus: var(--p-bg-color-default);
    --p-border-color-focus: var(--color-neutral-70);

    --p-text-color-readonly: var(--color-neutral-60);
    --p-bg-color-readonly: var(--color-neutral-85);
    --p-border-color-readonly: var(--color-neutral-80);

    --p-text-color-disabled: var(--color-neutral-70);
    --p-bg-color-disabled: var(--p-bg-color-default);
    --p-border-color-disabled: var(--color-neutral-85);


    &:where([readonly], .is-read-only) {
      + .input-button { --p-border-color: var(--color-neutral-60); }
    }
    &:where(#{$disabled}) {
      + .input-button { --p-border-color: var(--color-neutral-80); }
    }
  }
}

textarea.input-text { block-size:pxToRem(200); }

[type="search"]{
  padding-inline-start: pxToRem(48);
  &:disabled {
    + .icon-search {
      color:hsl(var(--color-neutral-20));
      #{$theme-dark} & { color:hsl(var(--color-neutral-70));}
    }
  }
  &::-webkit-search-cancel-button { display:none; }
}

[type="password"] {
  padding-inline-end: pxToRem(48);
  &:where(:not(:placeholder-shown)) { font-weight:bold; }
  &:where(:placeholder-shown) {
    ~ .show-password-button { opacity:0.5; }
  }
}

/* datetime input calendar icon in dark-mode change it to bright  */
input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
  #{$theme-dark} & {
    filter: contrast(0) brightness(1.5);
  }
}

.show-password-button {
  display:grid; place-content:center;
  position:absolute; inset-block:pxToRem(4); inset-inline-end:pxToRem(0);
  padding-inline:pxToRem(16); border-radius: var(--border-radius-small); font-size:pxToRem(18); transition:var(--transition);
}

.transparent-password-input {
  display:flex; gap:pxToRem(16); align-items:center;
  button {
    display:grid; place-content:center; inline-size:pxToRem(32); block-size:pxToRem(32);
    border-radius:var(--border-radius-circular); flex-shrink:0;
  }
  input { padding:0; border-width:0; font-size:pxToRem(24); }
}

.select {
  position: relative;
  select {
    white-space: pre;
    cursor: pointer;
    padding-inline-end: pxToRem(48);
    &:focus { outline:unset; }
  }
  :where([class*="icon"]) {
    position:absolute; inset-block-start:pxToRem(10); inset-inline-end:pxToRem(12);
    pointer-events:none; color:hsl(var(--p-text-color)); line-height:1;
  }
}

.custom-select {
  position:relative;
  .drop {
    --drop-border-color: var(--color-neutral-15);
    --drop-border-radius: var(--border-radius-xsmall);
    inset-inline:0; max-inline-size:none;
    #{$theme-dark} & {
      --drop-border-color: var(--color-neutral-80);
    }
  }
  .input-text-wrapper {
    .icon-cheveron-down { display:block; transition:var(--transition); }
  }
  &.is-open {
    .input-text-wrapper {
      .icon-cheveron-down { transform:rotateZ(-180deg); }
    }
  }
}

[type="file"] {
  cursor:pointer;
  &::-webkit-file-upload-button{ line-height:1; }
}

.text-counter {
  --p-text-counter-color: var(--color-neutral-50);
  display: flex;
  user-select: none;
  font-size: var(--font-size-00);
  color: hsl(var(--p-text-counter-color));
  &-separator::before { content:"/"; }
  input:placeholder-shown + & {
    --p-text-counter-color: var(--color-neutral-20);
    #{$theme-dark} & { --p-text-counter-color: var(--color-neutral-50); }
  }
  #{$input-text-wrapper} > & { position:absolute; inset-block-start:pxToRem(12); inset-inline-end:pxToRem(16); }
}

.wysiwyg {
  --p-options-bg-color: var(--color-neutral-5);
  display:flex; flex-direction:column; min-block-size:pxToRem(176);
  &-options {
    block-size:pxToRem(40); padding:pxToRem(4); margin-block-end:pxToRem(16);
    background-color:hsl(var(--p-options-bg-color)); border-radius:var(--border-radius-xsmall);
  }
  [contenteditable] {
    flex:1;
    &:empty::before { content: attr(data-placeholder); }
  }
}

/* tags input partial */
.tags-input {
  @extend .input-text;
  min-block-size:pxToRem(40); padding-block:pxToRem(5); padding-inline:pxToRem(15); block-size:auto;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  &-text { all:unset; flex:1; font-size:pxToRem(14); }
  &.is-focus {box-shadow: var(--focus-box-shadow); }
  .tags-input-text:not(input)::before { content: attr(placeholder); opacity:0.5; }

  /* default not read-only!!! this pseudo-class affect on div element and I need to overwrite this behavior */
  &.is-read-only {
    #{$theme-dark} &{
      --p-bg-color: var(--color-neutral-80);
      --p-border-color: var(--color-neutral-60);
      .tag {
        --tag-bg-color: var(--color-neutral-60);
        --tag-text-color: var(--color-neutral-15);
      }
    }
  }

}
.tags {
  display:contents;
  &-list { display:contents; gap:10px; flex-wrap:wrap; }
}
.input-tag {
  --p-bg-color: var(--tag-bg-color, var(--color-neutral-15));
  --p-text-color: var(--tag-text-color, var(--color-neutral-60));
  display:flex; height:pxToRem(28); gap:6px; align-items:center;
  background-color:hsl(var(--p-bg-color)); padding-inline:pxToRem(8); padding-block:pxToRem(6); border-radius:var(--border-radius-xsmall);
  color:hsl(var(--p-text-color));
  &-delete-button {
    aspect-ratio:1 / 1; line-height:1; border-radius:var(--border-radius-xsmall); text-align:center;
    [class*="icon"]::before { vertical-align:middle; }
  }
  &.is-disabled {  --p-text-color:var(--color-neutral-20); }
  #{$theme-dark} &{
    --tag-bg-color: var(--color-neutral-80);
    --tag-text-color: var(--color-neutral-20);
  }
}
.verification-code-input {
  --p-input-size: var(--input-size, #{pxToRem(40)});
  inline-size: var(--p-input-size);
  block-size: var(--p-input-size);
  font-size: pxToRem(20);
  text-align: center;

  &.is-large {
    --input-size: #{pxToRem(60)};
    font-size: pxToRem(30);
  }
}