@use 'sass:map';
@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/transition';
@use '@mezzanine-ui/system/typography';
@use '@mezzanine-ui/system/spacing';
@use '../text-field';
@use './select' as *;

.#{$prefix} {
  position: relative;
  min-width: spacing.semantic-variable(size, container, concentrate-fixed);

  &--multiple {
    min-width: spacing.semantic-variable(size, container, snug);
  }

  &--full-width {
    width: 100%;
  }
}

.#{$trigger-prefix} {
  cursor: pointer;

  &__input {
    appearance: none;
    min-width: 0;
    padding: 0;
  }

  &--readonly {
    cursor: default;
  }

  &--multiple.#{$trigger-prefix}--selected {
    padding: spacing.semantic-variable(padding, vertical, tiny)
      spacing.semantic-variable(padding, horizontal, cozy)
      spacing.semantic-variable(padding, horizontal, tiny)
      spacing.semantic-variable(padding, vertical, tiny);
    gap: spacing.semantic-variable(gap, slim);

    .#{$trigger-prefix}__input {
      position: absolute;
      inset: 0;
      z-index: -1;
    }

    &:has(.#{text-field.$prefix}__prefix) {
      padding-left: spacing.semantic-variable(padding, horizontal, cozy);
    }
  }

  &__tags-input-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;

    &--ellipsis {
      flex-wrap: nowrap;
    }

    &--wrap {
      gap: spacing.semantic-variable(gap, tight);
    }
  }

  &__tags-input {
    flex: 1;
    min-width: 30%;

    input {
      width: 100%;

      /* Hide native search clear button to avoid duplicate clear icon in trigger. */
      &[type='search']::-webkit-search-decoration,
      &[type='search']::-webkit-search-cancel-button,
      &[type='search']::-webkit-search-results-button,
      &[type='search']::-webkit-search-results-decoration {
        display: none;
      }
    }
  }

  &.#{text-field.$prefix}--clearable &__tags-input {
    min-width: 0;
  }

  &__tags {
    width: auto;
    max-width: calc(
      100% - var(--#{text-field.$prefix}-prefix-x-gap, 0px) - var(
          --#{text-field.$prefix}-icon-size, 0px
        )
    );
    display: flex;
    flex-flow: row wrap;
    gap: spacing.semantic-variable(gap, tight);
    align-items: center;
    justify-self: flex-start;

    &--ellipsis {
      flex-wrap: unset;
    }
  }

  & &__suffix-action-icon {
    transition:
      transition.standard(transform), transition.standard(color),
      transition.standard(opacity);
    will-change: transform, color, opacity;

    &--active {
      transform: rotate(180deg);
    }
  }

  .#{text-field.$prefix}__clear-icon {
    display: none;
  }

  &.#{text-field.$prefix}--clearable {
    &:hover:not(.#{text-field.$prefix}--disabled):not(.#{text-field.$prefix}--readonly),
    &.#{text-field.$prefix}--typing,
    &:focus-within:not(.#{text-field.$prefix}--disabled):not(.#{text-field.$prefix}--readonly) {
      .#{text-field.$prefix}__clear-icon {
        display: inline-flex;
        opacity: 1;
        pointer-events: auto;
      }

      .#{text-field.$prefix}__suffix {
        display: none;
      }
    }
  }
}