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

@mixin insertCustomInputDisabledTags() {
  background-color: $gray-100;
  color: $gray-500;

  * {
    stroke: $gray-300;
  }
}

@mixin insertCustomInputFocusTags() {
  box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 #1018280D;
}

@mixin insertCustomInputPlaceholderTags() {
  @include fnt($size: 16, $weight: 400, $line_height: 24, $color: $gray-400);
}

@mixin insertCustomOptionsInputAddition() {
  .dropdown {
    flex: none;
    width: 20px;
    height: 20px;

    @include centerInsideContent();

    cursor: pointer;

    * {
      stroke: $gray-500;
    }
  }

  .textIcon {
    flex: none;
    width: 20px;
    height: 20px;

    @include centerInsideContent();

    * {
      stroke: $gray-500;
    }
  }

  .removeIcon {
    flex: none;
    width: 20px;
    height: 20px;

    @include centerInsideContent();

    * {
      stroke: $error-500;
    }
  }
}

@mixin insertCustomInputTags(
  $width: 320,
  $height: 44,
) {
  width: #{$width}px;
  height: #{$height}px;

  @include centerInsideContent();

  border-radius: 8px;
  padding: 10px 12px;
  gap: 6px;

  background-color: #FFFFFF;
  box-shadow: 0 1px 2px 0 #1018280D, 0 0 0 1px $gray-300;

  @include fnt($size: 16, $weight: 400, $line_height: 24, $color: $gray-900);

  @include insertCustomOptionsInputAddition();

  &::placeholder {
    @include insertCustomInputPlaceholderTags();
  }

  &:focus {
    @include insertCustomInputFocusTags();
  }

  &:disabled {
    @include insertCustomInputDisabledTags();
  }

  @content;
}

@mixin insertCustomInputErrorFocusTags() {
  box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 #1018280D;
}

@mixin insertCustomInputErrorTags() {
  box-shadow: 0 0 0 1px $error-300;

  &:focus {
    @include insertCustomInputErrorFocusTags();
  }
}

@mixin insertCustomInput(
  $width: 300,
  $height: 44,
) {
  .input {
    @include insertCustomInputTags($width: $width, $height: $height);
  }

  &.isError {
    .input {
      @include insertCustomInputErrorTags();
    }
  }
}

@mixin insertCustomInputError() {
  .input {
    @include insertCustomInputErrorTags();
  }
}