@layer component {
  .miz-link,
  .miz-link-container a:not([aria-hidden=true]) {
    --link-font-color: currentcolor;
    --link-background-color: transparent;
    --link-border-color: transparent;
    --link-font-size: inherit;
    --link-font-weight: 600;
    --link-font-stretch: inherit;
    --effect-background-image: linear-gradient(0deg, rgb(253, 184, 25) 0%, rgb(253, 184, 25) 100%);
    display: inline-flex;
    margin: 0 -1px -0.25rem -1px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    text-decoration: none;
    z-index: 1;
    background-image: var(--effect-background-image);
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
    color: currentcolor;
    font-weight: 600;
    transition: background-size 0.2s ease-in-out, color 0s;
    justify-content: flex-start;
    align-items: center;
    color: var(--link-font-color);
    background-color: var(--link-background-color);
    font-size: var(--link-font-size);
    font-stretch: var(--link-font-stretch);
    font-weight: var(--link-font-weight);
  }
  .miz-link:hover,
  .miz-link-container a:hover:not([aria-hidden=true]) {
    background-size: 100% 100%;
    color: rgb(0, 0, 0);
  }
  .miz-link:active,
  .miz-link-container a:active:not([aria-hidden=true]) {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
  .miz-link:focus-visible,
  .miz-link-container a:focus-visible:not([aria-hidden=true]) {
    outline: 2px dashed rgb(253, 184, 25);
    outline-offset: 1px;
    background-image: linear-gradient(0deg, rgb(255, 223, 165) 0%, rgb(255, 223, 165) 100%);
    background-size: 100% 100%;
    color: rgb(0, 0, 0);
  }
}
@layer container {}
@layer component {
  .miz-link-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
}
@layer component {
  .miz-link__icon {
    vertical-align: middle;
  }
  .miz-link__icon:first-child {
    margin-right: 12px;
    margin-left: -4px;
  }
  .miz-link__icon:last-child {
    margin-right: -4px;
    margin-left: 8px;
  }
  .miz-link__icon:only-child {
    margin: 0 -4px;
  }
}
@layer modifier {
  .miz-link--cta {
    --link-font-weight: 600;
    --link-font-stretch: 75%;
    --effect-background-image: linear-gradient(0deg, rgb(253, 184, 25) 0%, rgb(253, 184, 25) 100%);
    display: inline-block;
    margin: 0 -1px -0.25rem -1px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    text-decoration: none;
    z-index: 1;
    background-image: var(--effect-background-image);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: 0 100%;
    color: currentColor;
    font-weight: 600;
    transition: background-size 0.2s ease-in-out, color 0s;
  }
  .miz-link--cta:hover {
    background-size: 100% 100%;
    color: currentColor;
  }
  .miz-link--cta:active {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
  .miz-link--cta:hover {
    background-size: 0 3px;
  }
  .miz-link--cta:focus-visible {
    background-size: 0 3px;
    transition: none;
  }
  .miz-link--cta:active {
    background-size: 100% 3px;
  }
  .miz-link--cta.miz-link--dark:hover {
    --link-font-color: rgb(255, 255, 255);
  }
  .miz-link--cta.miz-link--dark:focus-visible {
    --link-font-color: rgb(255, 255, 255);
  }
  .miz-link--cta.miz-link--dark:active {
    --link-font-color: rgb(255, 255, 255);
  }
}
@layer modifier {
  .miz-link--cta-circle-icon {
    --link-font-weight: 600;
    --link-font-stretch: 75%;
    background-size: 0;
  }
  .miz-link--cta-circle-icon span {
    --effect-background-image: linear-gradient(0deg, rgb(253, 184, 25) 0%, rgb(253, 184, 25) 100%);
    display: inline-block;
    margin: 0 -1px -0.25rem -1px;
    padding: 0.125rem 0.125rem 0.125rem 0.125rem;
    text-decoration: none;
    z-index: 1;
    background-image: var(--effect-background-image);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: 0 100%;
    color: currentcolor;
    font-weight: 600;
    transition: background-size 0.2s ease-in-out, color 0s;
    background-size: 0 3px;
  }
  .miz-link--cta-circle-icon span:hover {
    background-size: 100% 100%;
    color: rgb(0, 0, 0);
  }
  .miz-link--cta-circle-icon span:active {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
  }
  .miz-link--cta-circle-icon:hover span {
    background-size: 100% 3px;
  }
  .miz-link--cta-circle-icon:focus-visible span {
    transition: none;
  }
  .miz-link--cta-circle-icon:active span {
    background-size: 0 3px;
  }
  .miz-link--cta-circle-icon.miz-link--dark .miz-link__icon {
    color: rgb(0, 0, 0);
  }
  .miz-link--cta-circle-icon.miz-link--dark:hover span {
    --link-font-color: rgb(255, 255, 255);
    color: var(--link-font-color);
  }
  .miz-link--cta-circle-icon.miz-link--dark:focus-visible span {
    --link-font-color: rgb(255, 255, 255);
    color: var(--link-font-color);
  }
  .miz-link--cta-circle-icon.miz-link--dark:active span {
    --link-font-color: rgb(255, 255, 255);
    color: var(--link-font-color);
  }
}
@layer modifier {
  .miz-link--condensed {
    font-stretch: condensed;
  }
}
@layer modifier {
  .miz-link--outlined {
    --link-font-color: rgb(0, 0, 0);
    --link-border-color: rgb(253, 184, 25);
    --link-background-color: rgb(255, 255, 255);
    --link-background-color-hover: rgb(253, 184, 25);
    display: inline-block;
    padding: 1rem 1.5rem 1rem 1.5rem;
    border: 2px solid var(--link-border-color);
    text-decoration: none;
    font-weight: bold;
    z-index: 1;
    background-image: linear-gradient(to left, var(--link-background-color-hover) 0%, var(--link-background-color-hover) 100%);
    background-repeat: no-repeat;
    background-size: 0 100%;
    background-position: left 0;
    transition: background-size 0.1s ease-in-out 0s;
    box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.1);
  }
  .miz-link--outlined:hover {
    background-size: 100% 100%;
  }
  .miz-link--outlined:active {
    --link-background-color-hover: rgb(255, 209, 125);
  }
}
@layer modifier {
  .miz-link--light {
    --link-font-color: rgb(0, 0, 0);
    --link-border-color: rgb(96, 96, 96);
  }
  .miz-link--light:active {
    --link-background-color-hover: #e5e5e5;
  }
  .miz-link--dark {
    --link-font-color: rgb(255, 255, 255);
    --link-border-color: rgb(249, 249, 249);
    border-width: 1px;
  }
  .miz-link--dark:hover {
    --link-font-color: rgb(0, 0, 0);
  }
  .miz-link--dark:active {
    --link-font-color: rgb(0, 0, 0);
    --link-background-color-hover: rgb(70, 70, 70);
  }
}
@layer modifier {
  .miz-link--large {
    --link-font-size: 1.2rem;
  }
  .miz-link--x-large {
    --link-font-size: 1.728rem;
  }
}
@layer modifier {
  .miz-link--fill {
    display: block;
    text-align: center;
  }
}
@layer modifier {
  .miz-link--caps {
    text-transform: uppercase;
  }
}