@use "../../../styles/tools/generate";
@use "./config";
@use "./mixins";

@layer components {
  .tooltip {
    @include mixins.tooltip;

    &.is-visible {
      @include mixins.tooltip-visible;
    }

    &__dialog {
      @include mixins.dialog;
    }

    &__arrow {
      @include mixins.arrow;
    }
  }

  .info-tooltip {
    @include mixins.info-tooltip;

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

    &.is-active &__icon,
    &:focus &__icon {
      @include mixins.info-tooltip-active-icon;
    }
  }
}