@use "sass:map" as sass-map;
@use "../../../styles/tools/generate";
@use "../../../styles/tokens/color";
@use "./config";
@use "./mixins";

@layer components {
  .tag {
    @include mixins.base();

    @each $name, $props in config.$sizes {
      &#{generate.variant-name($name)} {
        @include mixins.size($name);
      }
    }

    @each $variant, $props in config.$colors {
      &#{generate.variant-name($variant)} {
        @include mixins.color($variant);
      }
    }

    // Special styling for default tags inside .background-secondary parent
    .background-secondary & {
      // Target tags that don't have any color variant class
      // Use negative lookahead-like approach: exclude if class contains any color variant
      &:not([class*="--orange"]):not([class*="--black"]):not(
          [class*="--yellow"]
        ):not([class*="--green"]):not([class*="--blue"]):not(
          [class*="--success"]
        ):not([class*="--danger"]):not([class*="--info"]):not(
          [class*="--warning"]
        ):not([class*="--transparent"]) {
        background-color: var(--color-surface-moderate);

        &:where(button),
        &:where(a) {
          background-color: var(--color-surface-moderate);

          &:not([disabled]):not([aria-disabled="true"]) {
            &:focus-visible,
            &:hover {
              background-color: color.$gray-600;
            }

            &:active,
            &.is-active {
              color: var(--color-text-inverse);
              background-color: var(--color-background-contrast);
            }
          }
        }
      }
    }

    // Transparent class is a special variant of color, it's not possible to make transparent variant for each color at the moment.
    &--transparent {
      @include mixins.color-transparent();

      &:where(button) {
        @include mixins.button-transparent();
        z-index: 2;
      }

      &:where(a) {
        @include mixins.button-transparent();
        z-index: 2;
        text-decoration: none;
      }

      @include mixins.button-transparent-disabled();
    }

    &:not(&--transparent):where(button) {
      @include mixins.button();
      z-index: 2;
    }

    &:not(&--transparent):where(a) {
      @include mixins.button();
      z-index: 2;
      text-decoration: none;
    }

    &:not(&--transparent) {
      @include mixins.buttton-disabled();
    }

    &__wrapper {
      position: relative;
      display: inline-flex;
      align-items: center;

      .tag {
        @each $name, $props in config.$sizes {
          &#{generate.variant-name($name)} {
            @if sass-map.has-key(config.$icon-sizes, $name) {
              $icon-props: sass-map.get(config.$icon-sizes, $name);
              $padding: sass-map.get($icon-props, padding);
              padding-right: calc(#{$padding * 2 + 1.5rem}) !important;
              margin-right: 0.5rem;
            }
          }
        }
      }
    }

    &__action {
      @include mixins.base();
      @include mixins.button(true);
      @include mixins.buttton-disabled(true);

      aspect-ratio: 1;
      display: flex;
      align-items: center;
      border-radius: 9999px;
      z-index: 2;

      .background-secondary & {
        background-color: var(--color-border-strong);

        &:not([disabled]):not([aria-disabled="true"]) {
          &:focus-visible,
          &:hover {
            background-color: color.$gray-600;
          }

          &:active,
          &.is-active {
            color: var(--color-text-inverse);
            background-color: var(--color-background-contrast);
          }
        }

        &[aria-disabled="true"],
        &[disabled] {
          background-color: var(--color-border-strong);
        }
      }

      @each $name, $props in config.$icon-sizes {
        &#{generate.variant-name($name)} {
          $padding: sass-map.get($props, padding);
          margin-left: calc(-#{$padding * 2 + 1.5rem}) !important;
          @include mixins.size($name, config.$icon-sizes);
        }
      }
    }
  }
}
