@use "./mixins";
@use "./config";
@use "../../../styles/tools/convert";
@use "../../../styles/tools/generate";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tokens/space";

@layer components {
  $with-text-end-host-selectors: ":where(p, div, li, span, a, label)";

  #{$with-text-end-host-selectors}:has(> .icon--with-text-end:first-child) {
    --icon-with-text-end-size: 1em;
    padding-inline-start: calc(
      var(--icon-with-text-end-size) + #{convert.to-rem(5px)}
    );
  }

  @each $breakpoint-name, $sizes in config.$sizes {
    @include breakpoint.get($breakpoint-name) {
      @each $variant, $size in $sizes {
        #{$with-text-end-host-selectors}:has(
          > .icon--with-text-end.icon#{generate.variant-name($variant)}:first-child
        ) {
          --icon-with-text-end-size: #{$size};
        }
      }
    }
  }

  .icon {
    @include mixins.base;
    @include mixins.sizes;
    @include mixins.colors;

    // Pictogram sizes stay fixed. Responsive sizing belongs to icons only.
    &--pictogram {
      @each $variant, $size in config.$pictogram-sizes {
        &.icon#{generate.variant-name($variant)} {
          --icon-size: #{$size};
        }
      }
    }

    &__use {
      &--light {
        display: block;
      }

      &--dark {
        display: none;
      }

      // In dark theme, hide light and show dark
      .is-dark &,
      .background-contrast &,
      .surface-contrast & {
        &--light {
          display: none;
        }

        &--dark {
          display: block;
        }
      }

      // In light theme, explicitly show light and hide dark
      .is-light & {
        &--light {
          display: block;
        }

        &--dark {
          display: none;
        }
      }
    }

    &--with-text-end {
      margin-inline-end: convert.to-rem(5px);

      &:first-child {
        margin-inline-start: calc(
          (var(--icon-with-text-end-size, 1em) + #{convert.to-rem(5px)}) * -1
        );
      }
    }
  }

  use {
    pointer-events: none;
  }
}