Link.module.css

.Link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--brand-animation-duration-faster);
  text-decoration: none;
  cursor: pointer;
}

.Link:hover {
  text-decoration: none;
}

.Link::after {
  position: absolute;
  bottom: -0.15em;
  left: 0;
  width: calc(100% - 1.5em);
  height: 2px;
  pointer-events: none;
  content: '';
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 0;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .Link::after {
    transition: transform var(--brand-animation-duration-fast) ease;
  }
}

.Link:active:after,
.Link:hover:after {
  transform: scaleX(1);
}

.Link:focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-color-canvas-default), 0 0 2px 5px var(--brand-color-focus);
  transition: none;
}

.Link--default,
.Link--default span {
  color: var(--brand-Link-color-default);
}

.Link--accent,
.Link--accent span {
  color: var(--brand-Link-color-accent);
}

.Link--label {
  font-weight: var(--base-text-weight-semibold);
}

.Link-arrow {
  margin-left: 4px;
}

.Link--large .Link--label {
  font-size: var(--base-size-20);
}

.Link--large .Link-arrow {
  width: 20px;
  height: 20px;
}

.Link--arrow-start::after {
  left: auto;
  right: 0;
  transform-origin: right 0;
  width: calc(100% - var(--base-size-20));
}

.Link--arrow-start .Link-arrow {
  margin-left: auto;
  margin-right: 4px;
}