@import 'style/theming';

@mixin focus {
  .input {
    @include themed() {
      &__container {
        border: 1px solid t(foreground-color);
      }

      &__icon {
        :deep(svg) {
          fill: t(foreground-color);
        }
      }
    }
  }
}

.input, .textarea {
  &:focus-within {
    @include focus;
  }
}

.input {
  &__label {
    font-size: 10pt;
  }

  &__description {
    font-size: 9pt;
    opacity: .5;
  }

  &__container {
    position: relative;
    display: flex;

    &--normal, &--bold {
      border-radius: 3px;
      @include themed() {
        border: 1px solid t(border-color);
      }
    }

    &--light {
      border-bottom: 1px solid #dedede;
    }
  }

  &__input {
    width: 100%;
    outline: none;
    user-select: none;
    border: 0;

    &--normal, &--bold {
      border-radius: 3px;
      @include themed() {
        color: t(foreground-color);
        background: t(background-color);
      }
    }

    &--normal {
      padding: $default-input-padding;
    }

    &--bold {
      padding: .6em .6em;
    }

    &--light {
      background: transparent;
      border-bottom: 1px solid #dedede;
    }

    &--icon {
      padding-left: 2.6em !important;
    }

    &--readOnly {
      background: #eee;
    }
  }

  &__textarea {
    display: block;
    border: 1px solid #dedede;
    width: 100%;
    height: 8em;
    outline: none;
  }

  &__icon {
    position: absolute;
    width: 1.1em;

    :deep(svg) {
      fill: #bbb;
    }

    &--normal, &--bold {
      top: 50%;
      left: .6em;
      transform: translateY(-50%);
    }

    &--light {
      top: 0;
      left: 0;
    }
  }

  &__clipboard {
    display: flex;
    place-items: center;
    border: 1px solid #dedede;
    background: #ddd;

    padding: 0 .6em;
  }
}