@use "mixins";

@layer components {
  a:not(
    .link,
    .btn,
    .mm-link,
    .megamenu-link,
    .list__control,
    .tab-list__tab,
    .stepbar__link,
    .osk-breadcrumbs__link,
    .skip-link,
    .dropdown__item,
    .carousel-promotions__slide,
    .osk-footer a,
    .mm-header a,
    .megamenu-header a,
    .tag,
    small a
  ),
  .link {
    @include mixins.base();
    @include mixins.base-inherit();

    &:hover {
      color: var(--color-text-accent);
      text-decoration: underline;
    }
    &.text-accent:hover {
      color: var(--color-text-default) !important;
    }
    &:focus-visible {
      outline: 2px solid var(--color-border-contrast);
      outline-offset: 2px;
    }
    > .icon {
      @include mixins.icon;
    }
  }

  .link__icon-left {
    @include mixins.icon-left;
  }

  .link__icon-right {
    @include mixins.icon-right;
  }

  a:has(.link__icon-left),
  .link:has(.link__icon-left),
  a:has(.link__icon-right),
  .link:has(.link__icon-right) {
    display: inline-flex;
    align-items: center;
  }
}