@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icons" as *;
@use "../textEditor" as *;
@use "../common/sizes" as *;
@use "../../base/tagBox";

// adduse

.dx-tagbox {
  .dx-texteditor-input-container {
    height: 100%;
  }

  .dx-texteditor-input {
    height: $material-tagbox-tag-height;
  }

  &.dx-editor-filled,
  &.dx-editor-outlined {
    .dx-texteditor-input {
      padding: 0;
      margin-top: $material-tagbox-tag-margin;
    }

    .dx-tag-container {
      padding: $material-tagbox-tag-container-padding;
      min-height: $material-base-inline-widget-height;
    }
  }

  &.dx-state-disabled {
    .dx-tag-content {
      background-color: $tagbox-tag-disabled-bg;

      .dx-tag-remove-button::before {
        color: $tagbox-tag-disabled-bg;
      }
    }
  }

  &.dx-texteditor-with-label,
  &.dx-texteditor-with-floating-label {
    &.dx-editor-outlined {
      .dx-tag-container.dx-texteditor-input-container {
        padding-top: $material-tagbox-outlined-with-label-top-padding;
      }
    }

    &.dx-editor-filled {
      .dx-tag-container.dx-texteditor-input-container {
        padding-top: $material-tagbox-filled-with-label-top-padding;
        padding-bottom: $material-tagbox-filled-with-label-bottom-padding;
      }
    }

    &.dx-editor-underlined {
      .dx-tag-container.dx-texteditor-input-container {
        padding-top: $material-tagbox-filled-with-label-top-padding;
        padding-bottom: $material-tagbox-filled-with-label-bottom-padding;
      }

      &.dx-tagbox:not(.dx-texteditor-empty):not(.dx-editor-filled):not(.dx-editor-outlined) {
        .dx-tag-container {
          margin-top: 0;
        }
      }
    }
  }
}

.dx-tagbox:not(.dx-texteditor-empty):not(.dx-editor-filled):not(.dx-editor-outlined) {
  .dx-tag-container {
    margin-top: -$material-tagbox-tag-margin;

    &::after {
      margin-top: math.div(-$material-texteditor-icon-container-size, 2) + math.div($material-tagbox-tag-margin, 2);
    }
  }

  .dx-texteditor-input {
    padding-left: 0;
    margin-top: $material-tagbox-tag-margin;

    @at-root #{selector-append(".dx-rtl", &)},
    .dx-rtl & {
      padding-right: 0;
      padding-left: 0;
      margin-right: 0;
      margin-left: 0;
    }
  }

  &.dx-state-focused,
  &.dx-state-active {
    &::before {
      border-top: 0;
      border-bottom: 0;
    }
  }

  &.dx-state-hover,
  & {
    &::after {
      border-bottom: 0;
    }
  }
}

.dx-tagbox-single-line {
  .dx-tag-container {
    padding-right: 0;
  }
}

.dx-tag-content {
  margin: 0;
  padding: $material-tagbox-tag-content-padding;
  min-width: 40px;
  background-color: $tagbox-tag-bg;
  color: $tagbox-tag-color;
  border-radius: $tagbox-tag-border-radius;
}

.dx-tag-remove-button {
  width: $material-tagbox-remove-button-width;
  height: 100%;
  right: $material-tagbox-remove-button-right;

  @include dx-icon(clear);

  font-size: 10px;

  &::before {
    display: block;
    position: absolute;
    top: 51%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    line-height: 16px;
    color: $tagbox-tag-button-remove-color;
    background-color: $tagbox-tag-button-remove-bg;
    border-radius: 50%;
    transform: none;
  }
}

.dx-tag {
  margin: $material-tagbox-tag-margin $material-tagbox-tag-margin 0 0;

  &:hover {
    .dx-tag-content {
      background-color: $tagbox-tag-hover-bg;
      color: $tagbox-tag-active-color;
    }
  }
}

.dx-tag.dx-state-focused {
  .dx-tag-content {
    background-color: $tagbox-tag-focused-bg;
    color: $tagbox-tag-active-color;
  }
}

@mixin tagbox-editor-container-offset() {
  right: $material-invalid-badge-horizontal-padding;

  @at-root #{selector-append(".dx-rtl", &)},
  .dx-rtl & {
    left: $material-invalid-badge-horizontal-padding;
  }
}

.dx-tagbox.dx-invalid,
.dx-tagbox.dx-valid {
  .dx-texteditor-container {
    &::after {
      @include tagbox-editor-container-offset();
    }
  }
}

.dx-tagbox.dx-validation-pending {
  .dx-texteditor-container {
    .dx-pending-indicator {
      @include tagbox-editor-container-offset();
    }
  }
}

.dx-tagbox-popup-wrapper {
  .dx-list-select-all {
    border-bottom: 1px solid $tagbox-select-all-border-color;
    padding-bottom: $material-tagbox-select-all-padding-bottom;
    margin-bottom: $material-tagbox-select-all-margin-bottom;

    &::after {
      background-color: transparent;
    }
  }
}

.dx-rtl {
  .dx-tag-content {
    padding-right: $material-tagbox-tag-content-padding-left;
    padding-left: $material-tagbox-tag-content-padding-right;
  }

  .dx-tag-remove-button {
    left: 4px !important; // stylelint-disable-line declaration-no-important
  }
}