@import "../../../assets/scss/main.scss";
@import "../assets/tag.scss";

@mixin filledInputPadding {
  padding-left: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
}

@mixin filledInputPaddingSmall {
  padding-left: 2px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.input {
  &__wrapper {
    &::v-deep {
      .vs {
        &__selected {
          &-options {
            .vs {
              &__selected {
                @include tag;

                button {
                  background-color: transparent;
                  border: none;
                  margin: 0 0 0 6px;
                  padding: 0;

                  svg {
                    * {
                      &[stroke] {
                        stroke: var(--input-color) !important;
                      }

                      &[fill] {
                        fill: var(--input-color) !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .v-select {
        .vs {
          &__dropdown-option {
            padding-right: 12px;
            @include verySmall-block {
              padding-right: 10px;
            }

            &--highlight {
              &:not(.vs__dropdown-option--selected) {
                svg {
                  * {
                    &[stroke] {
                      stroke: $gray70 !important;
                    }
                  }
                }
              }
            }
          }
        }
      }

      &.small {
        .vs {
          &__selected {
            &-options {
              .vs {
                &__selected {
                  padding: $tagPaddingSmall;
                }
              }
            }
          }
        }

        .input {
          &__content {
            &.withContent {
              @include filledInputPaddingSmall;
            }
          }
        }
      }
    }
  }

  &__content {
    &.withContent {
      @include filledInputPadding;
    }
  }
}