@use '../../variables' as *;
@use '../../compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-modern-overrides($encapsulate: false) {
  --sky-override-a-border-radius: 0;
  --sky-override-a-color-hover-active: var(
    --sky-text-color-action-primary-hover
  );
  --sky-override-form-font-weight: var(--sky-font-weight-body-m);
  --sky-override-p-line-height: var(--sky-font-line_height-body-m);
}

@include compatMixins.sky-modern-v2-html {
  font-size: initial;
}

.sky-theme-modern {
  font-size: var(--sky-font-size-body-m);
  font-weight: var(--sky-font-weight-body-m);
  font-family: var(--sky-font-family-primary);
  color: var(--sky-color-text-default);
  background-color: var(--sky-color-background-page);

  transition:
    background-color $sky-transition-time-short,
    color $sky-transition-time-short;
}

.sky-theme-modern form {
  font-size: var(--sky-override-font-size, initial);
  font-weight: var(--sky-override-form-font-weight, initial);

  transition:
    background-color $sky-transition-time-short,
    color $sky-transition-time-short;
}

.sky-theme-modern {
  a {
    color: var(--sky-color-text-action);
    border-radius: var(
      --sky-override-a-border-radius,
      var(--sky-border-radius-s)
    );

    &:focus-visible:not(:active) {
      outline: none;
      box-shadow:
        0 0 0 var(--sky-border-width-action-focus)
          var(--sky-color-border-action-tertiary-focus),
        var(--sky-elevation-focus);
    }
  }

  h1,
  .sky-font-heading-1 {
    color: var(--sky-color-text-heading);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-heading-1);
    font-weight: var(--sky-font-weight-heading-1);
  }

  h2,
  .sky-font-heading-2 {
    color: var(--sky-color-text-heading);
    font-family: var(--sky-font-family-primary);
    font-size: var(--sky-font-size-heading-2);
    font-weight: var(--sky-font-weight-heading-2);
  }

  h3,
  .sky-font-heading-3 {
    color: var(--sky-color-text-heading);
    font-size: var(--sky-font-size-heading-3);
    font-weight: var(--sky-font-weight-heading-3);
  }

  h4,
  .sky-font-heading-4 {
    color: var(--sky-color-text-heading);
    font-size: var(--sky-font-size-heading-4);
    font-weight: var(--sky-font-weight-heading-4);
    text-transform: none;
  }

  h5,
  .sky-font-heading-5 {
    color: var(--sky-color-text-heading);
    font-size: var(--sky-font-size-heading-5);
    font-weight: var(--sky-font-weight-heading-5);
    text-transform: none;
  }

  p {
    line-height: var(--sky-override-p-line-height);
  }

  mark.sky-highlight-mark {
    background-color: var(--sky-color-background-text_highlight);
    color: var(--sky-color-text-default);
    border-bottom: var(--sky-border-width-text_highlight)
      var(--sky-border-style-accent) var(--sky-color-border-text_highlight);
  }

  :is(a, .sky-btn-link-inline) mark.sky-highlight-mark {
    color: var(--sky-color-text-link_highlighted);
  }

  .sky-rounded-corners {
    border-radius: var(--sky-border-radius-s);
  }
}

@include compatMixins.sky-modern-v2($encapsulate: false) {
  h1,
  .sky-font-heading-1 {
    line-height: var(--sky-font-line_height-heading-1);
  }

  h2,
  .sky-font-heading-2 {
    line-height: var(--sky-font-line_height-heading-2);
  }

  h3,
  .sky-font-heading-3 {
    line-height: var(--sky-font-line_height-heading-3);
  }

  h4,
  .sky-font-heading-4 {
    line-height: var(--sky-font-line_height-heading-4);
  }

  h5,
  .sky-font-heading-5 {
    line-height: var(--sky-font-line_height-heading-5);
  }
}
