@use 'sass:list';
@use 'sass:map';
@use '../theme.scss' as *;

:root,
:root.light-mode {
  --input-brd-hover: #{map.get($grays, 'gray-40')};
}

:root.dark-mode {
  --input-brd-hover: #{map.get($grays, 'gray-80')};
}
$iconAreaSize: 2em;
$iconAreaOffset: 5px;

.be-input {
  --radius: #{$baseInputRadius};
  position: relative;
  display: inline-flex;
  max-width: 100%;
  input,
  textarea,
  .input {
    vertical-align: baseline;
    padding: $inputPadding;
    line-height: $inputLineHeight;
    font-weight: 400;
    border: 1px solid;
    border-color: var(--brd);
    background-color: var(--bgc);
    color: var(--txt);
    transition-duration: 0.2s;
    border-radius: $baseInputRadius;
    outline: none;
    // flex: 1 0 auto;
    max-width: 100%;
    &:hover {
      border-color: var(--brd);
    }
    &:focus {
      border-color: $primary;
      &::placeholder {
        opacity: 1;
      }
      &.primary {
        border-color: $primary;
      }
      & ~ i.icon.clear-btn {
        border-radius: 50%;
        background-color: #ebebeb;
        opacity: 1;
        z-index: 100;
        &.disabled {
          pointer-events: none;
          color: #ebebeb;
          background-color: #f8f8f8;
          opacity: 1;
        }
        &:hover {
          opacity: 1;
        }
      }
    }
    &::placeholder {
      // color: #c4c4c4;
      opacity: 0.8;
    }
    &.align {
      &-left {
        text-align: left;
      }
      &-center {
        text-align: center;
      }
      &-right {
        text-align: right;
      }
    }
  }
  &[disabled],
  &.disabled {
    > input,
    > textarea {
      background-color: var(--suf);
      border-color: var(--brd);
      opacity: 0.5;
      pointer-events: none;
    }
    > label {
      background-color: transparent !important;
    }
  }
  &.readonly {
    > input,
    > textarea {
      pointer-events: none;
    }
  }
  &.round {
    --radius: 2em;
    > input {
      border-radius: var(--radius);
    }
  }
  &.underline > input {
    background: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid;
    border-color: var(--brd);
    padding-left: 0;
    padding-right: 0;
    &:focus {
      border-color: $primary;
    }
    & + label {
      left: 0 !important;
    }
  }
  &.transparent {
    label {
      color: transparent;
    }
    input {
      background: transparent;
      border-color: transparent;
      &:focus {
        border: 1px solid $primary !important;
      }
    }
    &:hover input {
      border: 1px dashed var(--brd);
    }
    &:hover label {
      color: var(--brd);
    }
  }
  &.edit {
    input {
      margin-right: 5px;
      background: transparent;
      border-color: transparent;
      pointer-events: none;
    }
    label {
      opacity: 0.5;
    }
    &.editable {
      input {
        pointer-events: auto;
        border: 1px solid $primary;
      }
      label {
        opacity: 1;
      }
      label:has(+ input:focus) {
        color: $primary;
      }
    }
  }
  &.fluid {
    display: flex;
    width: 100%;
    > input,
    > textarea {
      width: 100%;
    }
  }
  &.unit {
    input {
      padding-right: 2.5em !important;
    }
    &:after {
      content: attr(data-unit);
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(-100%, -50%);
    }
  }
  &.badge {
    input {
      padding-right: 3em;
    }
    .be-badge {
      top: 50%;
      right: 0;
      transform: translate(-50%, -50%);
    }
  }
  &.icon {
    > i.icon {
      position: absolute;
      height: $iconAreaSize;
      width: $iconAreaSize;
      text-align: center;
      opacity: 0.5;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      &:before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      &.clear-btn {
        right: $iconAreaOffset !important;
        transform: translate(0, -50%);
        font-size: 12px;
        cursor: pointer;
        opacity: 0;
      }
      & + label {
        left: $iconAreaSize;
      }
    }
    &.both {
      input {
        padding-left: calc($iconAreaSize + $iconAreaOffset) !important;
        padding-right: calc($iconAreaSize + $iconAreaOffset) !important;
      }
      i.icon {
        &:first-child {
          left: $iconAreaOffset;
          transform: translate(0, -50%);
        }
        &:last-child {
          right: $iconAreaOffset;
          transform: translate(0, -50%);
        }
      }
    }
    &.left {
      input {
        padding-left: calc($iconAreaSize + $iconAreaOffset);
      }
      i.icon {
        left: $iconAreaOffset;
        transform: translate(0, -50%);
      }
    }
    &.right {
      input {
        padding-right: calc($iconAreaSize + $iconAreaOffset);
      }
      i.icon {
        right: $iconAreaOffset;
        transform: translate(0, -50%);
      }
    }
    &.link {
      > i.icon {
        pointer-events: auto;
        cursor: pointer;
        &.round {
          border-radius: 50%;
        }
        &:hover {
          opacity: 1;
          background-color: #f8f8f8;
        }
      }
    }
  }
  &.labeled {
    .label {
      display: flex;
      align-items: center;
      background-color: var(--brd);
      padding: $verticalPadding;
      line-height: 1;
      vertical-align: baseline;
      &.outline {
        background-color: var(--bgc);
        border: 1px solid var(--brd);
        opacity: 0.8;
      }
    }
  }
  &.withButton,
  &.labeled {
    input,
    .be-button,
    .label {
      border-radius: 0;
    }
    input {
      z-index: 10;
    }
    .be-button {
      display: flex;
      align-items: center;
      border: 1px solid var(--brd);
      //box-shadow: 0 0 2px $borderColor inset;
    }
    &.left {
      input {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
      }
      .be-button,
      .label {
        margin-right: -1px;
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
        order: -1;
      }
    }
    &.right {
      input {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
      }
      .be-button,
      .label {
        margin-left: -1px;
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
      }
    }
  }
  &.number {
    input {
      text-align: center;
      border-radius: 0;
      border-top-left-radius: var(--radius);
      border-bottom-left-radius: var(--radius);
    }
    & > .be-button {
      margin: 0;
      margin-left: -1px;
      flex-shrink: 0;
    }
    .dec {
      // margin-right: -1px;
      // order: -1;
      border-radius: 0;
    }
    .inc {
      // margin-left: -1px;
      border-radius: 0;
      border-top-right-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
    &.between {
      input {
        border-radius: 0;
      }
      .dec {
        order: -1;
        margin-right: -1px;
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
      }
    }
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox  */
    input[type='number'] {
      -moz-appearance: textfield;
    }
  }

  textarea {
    width: 100%;
    min-height: 10em;
    padding: 6px 10px;
    resize: none;
  }
  &.short textarea {
    min-height: 4em;
  }
  & + .be-input:not(.fluid) {
    margin-left: 5px;
  }
  &.inline {
    display: inline-flex;
  }
  &.compact {
    input,
    .be-button {
      padding: $compactPadding;
    }
  }
  &:has(label) {
    // margin-top: 0.5em;
    input::placaeholder {
      opacity: 0;
    }
  }
  &:not(.labeled) {
    input + label,
    textarea + label {
      position: absolute;
      top: 50%;
      left: 10px;
      z-index: 10;
      transform: translate(0, -50%);
      line-height: $inputLineHeight;
      padding: 5px;
      background-color: var(--bgc);
      color: var(--input-brd-hover);
      transition: all 250ms;
      pointer-events: none;
    }
    input:focus + label,
    textarea:focus + label {
      color: $primary;
    }
    input:not(:placeholder-shown) + label,
    textarea + label,
    input:focus + label,
    textarea:focus + label {
      top: 0;
      left: 10px !important;
      font-size: 0.9em;
      line-height: 1;
      transform: translate(0, -50%);
    }
    label {
      position: absolute;
      top: 50%;
      left: 10px;
      z-index: 10;
      transform: translate(0, -50%);
      line-height: $inputLineHeight;
      padding: 5px;
      background-color: var(--bgc);
      color: var(--input-brd-hover);
      transition: all 250ms;
      pointer-events: none;
      &:has(+ input:focus, + textarea:focus) {
        color: $primary;
      }
      &:has(+ input:focus, + textarea),
      &:has(+ input:not(:placeholder-shown)) {
        top: 0;
        left: 10px !important;
        font-size: 0.9em;
        line-height: 1;
        transform: translate(0, -50%);
      }
    }
  }
  &.icon.left,
  &.icon.both {
    > label {
      left: $iconAreaSize;
    }
  }
  &.underline {
    input:focus + label,
    input:not(:placeholder-shown) + label {
      left: 0 !important;
    }
  }
}

@each $color, $values in $stateColors {
  $textColor: #{list.nth($values, 1)};
  $hoverColor: #{list.nth($values, 2)};
  .be-input {
    background-color: transparent !important;
    border: none !important;
    &.#{$color} {
      > input,
      > textarea {
        color: $textColor;
        border-color: $textColor;
        &.hover,
        &.focus,
        &:hover,
        &:focus {
          border-color: $hoverColor;
        }
        &::placeholder {
          color: $textColor;
        }
      }
      &.labeled {
        label {
          background-color: $textColor;
        }
      }
    }
  }
}