/* Register layers in the correct order */
/* 
* Browsers define layer order based on when they encounter @layer declarations.
* This file should be imported by all component styles, and other CSS entry points,
* to ensure that layers are registered in the correct order.
*/
@layer base, tokens, utilities, components, overrides;
/* Add component styles to component layer while preserving Stencil Scoped CSS */
@layer components {
  :host a {
    border: none; /* reset browser default borders */
    display: inline-block;
    cursor: pointer;
    font-family: var(--semantic-font-family-utility);
    font-size: var(--semantic-font-size-utility-m);
    font-style: normal;
    font-weight: var(--semantic-font-weight-utility-attention);
    line-height: var(--semantic-line-height-utility-m);
    letter-spacing: var(--semantic-letter-spacing-utility-m);
    text-decoration-line: underline;
    text-underline-position: from-font;
    transition: all var(--semantic-motion-duration-dynamic-medium-to-fast) var(--semantic-motion-easing-default-change);
    /* SIZE */
  }
  :host a i.icon {
    display: inline-block;
  }
  :host a.disabled {
    cursor: not-allowed;
  }
  :host a.icon-before {
    display: flex;
  }
  :host a.icon-before .link-icon {
    margin-right: var(--semantic-spacing-content-m-gap-plain);
    font-size: 1px; /* reset font size - prevent change on link height when use icon */
    line-height: 1; /* reset line height - prevent change on link height when use icon */
  }
  :host a.icon-after {
    display: flex;
  }
  :host a.icon-after .link-icon {
    order: 1;
    margin-left: var(--semantic-spacing-content-m-gap-plain);
    font-size: 1px; /* reset font size - prevent change on link height when use icon */
    line-height: 1; /* reset line height - prevent change on link height when use icon */
  }
  :host a.s {
    font-size: var(--semantic-font-size-utility-s);
    line-height: var(--semantic-line-height-utility-s);
    letter-spacing: var(--semantic-letter-spacing-utility-s);
  }
  :host a.primary {
    color: var(--semantic-color-action-primary-resting);
  }
  :host a.primary:hover {
    color: var(--semantic-color-action-primary-hover);
    text-decoration: underline transparent;
  }
  :host a.primary:active {
    color: var(--semantic-color-action-primary-active);
    transform: scale(var(--semantic-scaling-shrink-s));
  }
  :host a.primary.disabled {
    color: var(--semantic-color-action-primary-disabled);
    text-decoration: underline;
    transform: none;
    user-select: none;
  }
  :host a.primary.inverse {
    color: var(--semantic-color-action-primary-inverse-resting);
  }
  :host a.primary.inverse:hover {
    color: var(--semantic-color-action-primary-inverse-hover);
  }
  :host a.primary.inverse:active {
    color: var(--semantic-color-action-primary-inverse-active);
  }
  :host a.primary.inverse.disabled {
    color: var(--semantic-color-action-primary-inverse-disabled);
  }
  :host a.secondary {
    color: var(--semantic-color-action-secondary-resting);
  }
  :host a.secondary:hover {
    color: var(--semantic-color-action-secondary-hover);
    text-decoration: underline transparent;
  }
  :host a.secondary:active {
    color: var(--semantic-color-action-secondary-active);
    transform: scale(var(--semantic-scaling-shrink-s));
  }
  :host a.secondary.disabled {
    color: var(--semantic-color-action-secondary-disabled);
    text-decoration: underline;
    transform: none;
    user-select: none;
  }
  :host a.secondary.inverse {
    color: var(--semantic-color-action-secondary-inverse-resting);
  }
  :host a.secondary.inverse:hover {
    color: var(--semantic-color-action-secondary-inverse-hover);
  }
  :host a.secondary.inverse:active {
    color: var(--semantic-color-action-secondary-inverse-active);
  }
  :host a.secondary.inverse.disabled {
    color: var(--semantic-color-action-secondary-inverse-disabled);
  }
  :host a:focus-visible {
    transition: color 0.2s ease, outline 0.2s ease;
    border-radius: var(--radius-sm);
    outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
    outline-offset: 2px;
  }
}