@import 'themes/default';

$colors: (
  main,
  gray-1,
  gray-2,
  gray-3,
  gray-4,
  gray-5,
  gray-6,
  invert,
  dscout,
  coachmark,
  alert,
  close,
  success,
  archive,
  note,
  marker,
  test,
  part-0,
  part-1,
  part-2,
  part-3,
  part-4,
  part-5,
  part-6,
  part-7,
  part-8,
  part-9
);

.Link-Text {
  color: inherit;
  position: relative;
  text-decoration: none;
  border-bottom: solid var(--Link-Text____underline-width);
  border-bottom-color: rgba(
    var(--Link-Text____underline-color-rgb),
    var(--Link-Text____underline-opacity)
  );
  transition: border-bottom var(--timing--hover);

  &:hover,
  &:focus-visible {
    border-bottom-color: rgba(
      var(--Link-Text____underline-color-rgb),
      var(--Link-Text--hover____underline-opacity)
    );
  }
}

@each $enum in $colors {
  .color--#{$enum} .Link-Text,
  .Link-Text.color--#{$enum} {
    --Link-Text____underline-color-rgb: var(--color--#{$enum}-rgb);
  }
}