@use "@cloud-editor-mono/arduino-sass";

.text-area::-webkit-scrollbar {
  background-color: transparent;
  width: 6px;
}

.text-area::-webkit-scrollbar-track {
  background: transparent;
}

.text-area::-webkit-scrollbar-thumb {
  border: 0;
  background-color: rgba(127, 140, 141, 0.5);
}

.text-area,
.basic-input,
.basic-input:hover,
.basic-input:focus,
.basic-input:active {
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  border: none;
  text-decoration: none;
  outline: none;
  box-sizing: border-box;
}

.input {
  --transition: all ease-out 0.15s;

  position: relative;
  width: 100%;
  padding: 4px 0;

  &.app-lab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid #434f54;
    background: #171e21;
    width: auto;

    .input-label {
      position: unset;
      transform: unset;
      color: #c9d2d2;

      span {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1px;
      }
    }

    .input-container {
      height: 100%;
      background: transparent;
      color: #c9d2d2;
      border: none;
      outline: none;
      padding: unset;

      &.focused {
        border: none;
        box-shadow: unset;
      }

      .input-content {
        &[type="password"]::-ms-reveal {
          display: none;
        }
      }
    }

    .input-eye {
      position: unset;
      transform: unset;
    }

    &:focus-within {
      border: 1px solid #25c2c7;
      background: rgba(37, 194, 199, 0.08);
      box-shadow: unset;
    }

    &.disabled {
      .input-container {
        background: transparent;
        opacity: 0.5;
      }
    }
  }

  .input-error {
    position: absolute;
    top: 68px;
    color: arduino-sass.$darknotifyerror;
  }

  .input-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid arduino-sass.$smoke;
    border-radius: 2px;
    font-size: 16px;
    height: 60px;
    letter-spacing: 0.3px;
    line-height: 21px;
    padding: 16px 20px 0;
    position: relative;
    transition: var(--transition);
    width: 100%;
    box-sizing: border-box;

    &.small {
      height: 37px;
      padding: 2px 12px 0;
      border-radius: 3px;
      font-size: 14px;
      align-items: flex-end;

      .input-content {
        padding: 0;
        line-height: 170%;
      }
    }

    &.focused,
    &.has-error {
      border-color: transparent;
    }

    &.focused {
      box-shadow: 0 0 0 3px transparentize(arduino-sass.$teal3, 0.5);
    }

    &.has-error {
      box-shadow: 0 0 0 3px transparentize(arduino-sass.$darknotifyerror, 0.5);
    }

    &:hover {
      cursor: text;
    }
  }

  .input-content {
    width: inherit;

    &.monospace {
      font-family:
        monaco,
        Consolas,
        Lucida Console,
        monospace;
    }
  }

  .input-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: var(--transition);
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 20px;
    color: arduino-sass.$asbestos;

    span {
      transition: var(--transition);
    }

    span {
      margin-block-start: 0;
      margin-block-end: 0;
    }

    &.small {
      left: 12px;
    }
  }

  &.focused:not(.app-lab),
  &.has-content:not(.app-lab) {
    .input-label {
      top: 6px;
      transform: translateY(20%);
      color: arduino-sass.$jet;

      span {
        font-size: 12px;
      }

      &.small {
        span {
          font-size: 10px;
        }
      }
    }
  }

  &.disabled {
    &.small {
      .input-container {
        background-color: arduino-sass.$white;
        border: 1px solid arduino-sass.$smoke;
        z-index: 0;
      }

      .input-content {
        opacity: 0.5;
      }
    }

    .input-container {
      background-color: arduino-sass.$clouds;
      z-index: 0;
    }

    .input-label {
      opacity: 0.5;
    }
  }

  .input-before,
  .input-after {
    display: inline;

    .arduino-text {
      font-size: 16px;
      letter-spacing: 0.3px;
      line-height: 21px;
      user-select: none;
      margin-block-start: 0;
      margin-block-end: 0;
    }
  }

  .input-after {
    flex: 1 1;
  }

  .input-eye {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translate(0, -50%);
    svg {
      width: 24px;
      height: 24px;
      color: arduino-sass.$asbestos;
    }
  }
}
