@import '../config/import';

.crayons-link {
  color: var(--link-color);

  &:hover {
    color: var(--link-color-hover);
  }

  &--brand {
    color: var(--link-branded-color);

    &:hover {
      color: var(--link-branded-color-hover);
    }
  }

  &--secondary {
    color: var(--link-color-secondary);

    &:hover {
      color: var(--link-color-secondary-hover);
    }
  }

  &--current {
    font-weight: var(--fw-medium);
    color: var(--link-color-current);
    background: var(--link-bg-current);
  }
}

.crayons-link--block {
  display: flex;
  align-items: center;
  padding: var(--su-3);
  border-radius: var(--radius);
  transition: background var(--transition-props), color var(--transition-props);

  &:hover:not(.crayons-link--current) {
    background: var(--link-bg-hover);
  }

  @media (min-width: $breakpoint-s) {
    padding: var(--su-2);
  }

  .crayons-icon {
    margin-right: var(--su-2);
    vertical-align: middle;
    width: var(--su-6);
    height: var(--su-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
  }

  .c-indicator {
    margin-left: auto;

    &:empty {
      display: none;
    }
  }

  // Indented for when there's no icon
  &--indented {
    padding-left: calc(var(--su-2) + var(--su-7)); // 40px
  }
}

.crayons-link--contentful {
  display: block;
  padding: var(--su-4);
  border-bottom: 1px solid var(--body-bg);

  &:last-child {
    border-bottom: 0;
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
  }

  .crayons-link__secondary {
    color: var(--link-color-secondary);
    font-size: var(--fs-s);
    padding-top: var(--su-1);
  }

  &:hover {
    background: var(--link-bg-hover-alt);
    .crayons-link__secondary {
      color: var(--link-color-secondary-hover);
    }
  }
}
