@layer wind-fce.components {
  .linklist {
    display: flex;
    flex-direction: column;
    gap: var(--wind-fce-link-list-gap, 0.625rem);
    padding-inline-start: 0;
    margin-block-end: 0;
    list-style: none;
  }

  .linklist.layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .linklist-item {
    position: relative;
    padding-inline-start: 1.25rem;
  }

  .linklist-item::before {
    position: absolute;
    top: 0.35em;
    left: 0;
    width: 0.75rem;
    height: 0.75rem;
    content: '';
    background-color: var(--wind-fce-link-color, #1d4ed8);
    -webkit-mask: url('../Icons/arrow-right.svg') center / contain no-repeat;
    mask: url('../Icons/arrow-right.svg') center / contain no-repeat;
  }

  .linklist-item:has(.linklist-item-link:hover)::before {
    background-color: var(--wind-fce-link-color-hover, #1e3a8a);
  }

  .linklist-item-link {
    color: var(--wind-fce-link-color, currentColor);
    font-weight: 600;
    text-decoration: none;
  }

  .linklist-item-link:is(:hover, :active, :focus-visible) {
    text-decoration: none;
  }

  .linklist-item-link:focus-visible {
    outline: 3px solid var(--wind-fce-focus-color, currentColor);
    outline-offset: 3px;
  }
}

/* Keep FCE link colors independent from unlayered site-wide link styles. */
:where(.frame-type-windfce_linklist, .frame-type-windfce_ankerlist) .linklist-item-link {
  color: var(--wind-fce-link-color, #1d4ed8);
  text-decoration: none;
}

:where(.frame-type-windfce_linklist, .frame-type-windfce_ankerlist) .linklist-item-link:is(:hover, :active, :focus-visible) {
  color: var(--wind-fce-link-color-hover, #1e3a8a);
  text-decoration: none;
}