////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
// .c-link /////////////////////////////////////////////////
////////////////////////////////////////////////////////////

.c-link {
  position: relative;
  display: inline-block;
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
  outline: 0;
  text-decoration: none;
  color: var(--color);
  max-width: 100%;

  &--block {
    display: flex;
    padding: var(--su-2) var(--su-4);
    overflow-wrap: normal;
    background-color: var(--bg);

    &:hover {
      background-color: var(--bg-hover);
    }
  }

  &:hover,
  .js-focus-visible &.focus-visible:focus {
    color: var(--color-hover);
    z-index: var(--z-elevate);
    text-decoration: underline;
  }

  .js-focus-visible &.focus-visible:focus {
    box-shadow: var(--focus-ring);
  }

  &--block {
    .js-focus-visible &.focus-visible:focus {
      background-color: var(--bg-hover);
    }
  }

  &[aria-current='page'],
  &.c-link--current {
    --bg: var(--link-current-bg);
    --color: var(--link-current-color);
    font-weight: var(--fw-bold);
  }
}

.c-link {
  --bg: var(--link-bg);
  --bg-hover: var(--link-bg-hover);
  --color: var(--link-color);
  --color-hover: var(--link-branded-color-hover);
}

.c-link--branded {
  --bg: var(--link-branded-bg);
  --bg-hover: var(--link-branded-bg-hover);
  --color: var(--link-branded-color);
  --color-hover: var(--link-branded-color-hover);
}

.c-link--icon-alone {
  padding: var(--su-2);
  // If we ever want to display <Link /> only with icon it should probably
  // no longer be `block` (or `flex`) element, i.e. "Notifications" icon in
  // the header. Hence reverting to `inline-block`.
  display: inline-block;
}

.c-link--icon-left {
  .c-link__icon {
    margin-right: var(--su-1);
  }

  &.c-link--block {
    .c-link__icon {
      margin-right: var(--su-2);
      margin-left: calc(var(--su-2) * -1);
    }
  }
}
