@use '../variables' as *;

@each $name, $theme in cat-token('color.theme') {
  .cat-bg-#{$name} {
    background-color: cat-token('color.theme.#{$name}.bg') !important;
    color: cat-token('color.theme.#{$name}.fill') !important;
    // adjust nested links
    --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)};
    --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)};
    --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)};
    --cat-link-decoration: underline;
  }

  .cat-bg-#{$name}-hover {
    transition:
      background-color cat-token('time.transition.s'),
      color cat-token('time.transition.s');

    &:hover {
      background-color: cat-token('color.theme.#{$name}.bgHover') !important;
      color: cat-token('color.theme.#{$name}.fillHover') !important;
      // adjust nested links
      --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)};
      --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)};
      --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)};
      --cat-link-decoration: underline;
    }
  }

  .cat-text-#{$name},
  .cat-link-#{$name} {
    color: cat-token('color.theme.#{$name}.text') !important;
  }

  button.cat-text-#{$name},
  button.cat-link-#{$name} {
    margin: 0;
    padding: 0;
    font: inherit;
    border: none;
    background: none;
    cursor: pointer;
  }

  button.cat-link-#{$name} {
    &:hover:not(:disabled) {
      text-decoration: cat-token('font.decoration.linkHover');
    }

    &:focus-visible {
      outline: 2px solid cat-token('color.ui.border.focus');
      outline-offset: 1px;
    }
  }

  .cat-link-#{$name},
  .cat-text-#{$name}-hover {
    transition: color cat-token('time.transition.s');

    &:hover {
      color: cat-token('color.theme.#{$name}.textHover') !important;
    }

    &:active {
      color: cat-token('color.theme.#{$name}.textActive') !important;
    }
  }
}

// deprecated
.cat-active {
  color: cat-token('color.theme.primary.text') !important;
}

.cat-text-active {
  color: cat-token('color.theme.primary.text') !important;
}

// deprecated
.cat-muted {
  color: cat-token('color.ui.font.muted') !important;
}

.cat-text-muted {
  color: cat-token('color.ui.font.muted') !important;
}

.cat-bg-muted {
  background-color: cat-token('color.ui.background.muted') !important;
}

.cat-text-reset {
  color: inherit !important;
}

.cat-link-reset {
  color: inherit !important;
  text-decoration: inherit !important;
}