@import "variables";
@import "mixins";
@import "animations";

$textarea-scrollbar-width: 4px;
$textarea-resizer-safe-area: 4px;

.ark-ui-description {
  color: #A3A7B9 !important;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin: 4px 0 0 !important;
}

.ark-ui-input-box {
  .ark-ui-title {
    font-size: 12px;
    line-height: 16px;
    color: #919497;
    margin: 0 0 8px;
  }

  .ark-ui-label {
    color: #585B69;
    min-height: 16px;
  }

  .ark-ui-textarea-wrapper {
    position: relative;

    .ark-ui-textarea-resizer {
      position: absolute;
      right: $textarea-resizer-safe-area;
      bottom: $textarea-resizer-safe-area;

      cursor: pointer;

      &-icon {
        color: $gray-400;
      }
    }

    &.scrollable {
      .ark-ui-textarea-resizer {
        right: $textarea-resizer-safe-area + $textarea-scrollbar-width;
      }
    }

    &:hover, &:has(.ark-ui-textarea-element:focus), &:has(.ark-ui-textarea-element:active) {
      .ark-ui-textarea-resizer-icon {
        color: $gray-500;
      }
    }
  }

  .ark-ui-textarea-element {
    border: 1px solid #D3D5E5;
    border-radius: 4px;
    box-sizing: border-box;
    min-height: 80px;
    cursor: text;
    color: #27282E;
    font-size: 14px;
    line-height: 16px;
    font-family: Roboto, sans-serif;
    padding: 12px 16px;
    resize: none;

    &:focus, &:active {
      outline: none;
      border: 1px solid $gray-400;
    }

    &::placeholder {
      color: $gray-400;
    }

    &::-moz-placeholder {
      opacity: 1;
    }

    &:hover {
      border-color: $gray-400;
      &::placeholder {
        color: $gray-400;
      }
    }

    &:disabled {
      border-color: transparent;
      pointer-events: none;
      color: #585B69;
      background-color: #F6F6FA;
    }

    &::-webkit-scrollbar {
      width: $textarea-scrollbar-width;
    }

    &::-webkit-scrollbar-thumb {
      background-color: $gray-400;
      border-radius: 5px;
    }

    &::-webkit-scrollbar-track {
      background-color: #F6F6FA;
      border-radius: 5px;
    }
  }

  .ark-ui-input {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    width: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: text;
    border: 1px solid #D3D5E5;
    padding: 12px 16px;

    &-leftSlot {
      display: flex;
      margin-right: 8px;
    }

    &-rightSlot {
      display: flex;
      margin-left: 8px;
    }

    &-element {
      width: 100%;
      outline: none;
      border: none;
      color: #27282E;
      font-family: Roboto, sans-serif;
      background-color: transparent;

      @include ark-ui-text;

      &:not([type="password"]) {
        text-overflow: ellipsis;
      }

      &::placeholder {
        color: #A3A7B9;
        font-family: Roboto, sans-serif;
      }

      &::-moz-placeholder {
        opacity: 1;
      }

      appearance: textfield;
      -moz-appearance: textfield;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      &:disabled::placeholder {
        color: #A3A7B9 !important;
      }
    }

    &-reset {
      display: flex;
      cursor: pointer;
    }

    &-icon {
      cursor: pointer;
      margin-left: 24px;
    }

    &:has(.ark-ui-input-element:focus) {
      border-color: #A3A7B9;
    }

    &:has(.ark-ui-input-element[disabled]) {
      cursor: default;
    }

    &:has(.ark-ui-input-element:not([disabled])):hover {
      border-color: #A3A7B9;

      .ark-ui-input-element::placeholder {
        color: #A3A7B9;
      }
    }
  }

  &.with-errors {
    .ark-ui-input, .ark-ui-textarea-element {
      color: #585B69;

      &-element {
        color: #585B69;
      }

      &:not([disabled]) {
        border-color: #F66161;
      }

      &:has(.ark-ui-input-element:focus),
      &:has(.ark-ui-input-element:not([disabled])):hover {
        border-color: #F66161;
      }
    }

    .ark-ui-error {
      color: #F66161;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      margin: 4px 0 0;
    }
  }

  &.withCopy {
    .ark-ui-input {
      cursor: copy !important;
    }
  }

  &.disabled {
    .ark-ui-input {
      background-color: #F6F6FA;
      border: 1px solid #F6F6FA;

      &-element {
        pointer-events: none;
        color: #585B69;

        &::placeholder {
          color: #D3D5E5;
        }
      }
    }

    .ark-ui-description {
        color: #D3D5E5;
    }

    input {
      pointer-events: none;
    }
  }
}

.ark-ui-tooltip {
  width: fit-content;
  height: fit-content;
  position: relative;
}

.ark-ui-tooltip-cloud {
  position: fixed;
  width: max-content;
  height: max-content;
  background: rgba(88, 91, 105, 0.8);
  box-shadow: 0 4px 16px rgba(75, 77, 89, 0.16);
  color: white;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  border-radius: 4px;
  padding: 4px 8px;
  z-index: $tooltip;
  word-break: break-word;
  transform: translateY(calc(-100% - 12px));

  &.center {
    transform: translateY(50%);
  }

  &.bottom {
    transform: translateY((calc(100% + 12px)));
  }

  &.right {
    transform: translate(-100%, calc(-100% - 12px));
  }

  &.bottom.right {
    transform: translate(-100%, (calc(100% + 12px)));
  }

  &.copy {
    padding: 4px 28px 4px 8px;
    background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCwwLDI1NiwyNTYiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxnIHRyYW5zZm9ybT0ic2NhbGUoMTYsMTYpIj48cGF0aCBkPSJNNS41LDJjLTAuMjc2MTQsMCAtMC41LDAuMjIzODYgLTAuNSwwLjV2Mi41aC0yLjVjLTAuMjc2MTQsMCAtMC41LDAuMjIzODYgLTAuNSwwLjV2OGMwLDAuMjc2MSAwLjIyMzg2LDAuNSAwLjUsMC41aDhjMC4yNzYxLDAgMC41LC0wLjIyMzkgMC41LC0wLjV2LTIuNWgyLjVjMC4yNzYxLDAgMC41LC0wLjIyMzkgMC41LC0wLjV2LThjMCwtMC4yNzYxNCAtMC4yMjM5LC0wLjUgLTAuNSwtMC41ek0xMSwxMGgydi03aC03djJoNC41YzAuMjc2MSwwIDAuNSwwLjIyMzg2IDAuNSwwLjV6TTMsNnY3aDd2LTd6Ij48L3BhdGg+PC9nPjwvZz48L3N2Zz4=") center right 8px no-repeat rgba(88, 91, 105, 0.8);
  }

  &.copy:hover {
    background-color: rgba(39, 40, 46, 0.7);
  }
}