@use "../../tools/colour";

.tna-template {
  @include colour.always-light;

  @include colour.colour-background("background");

  &--system-theme {
    @media (prefers-color-scheme: dark) {
      @include colour.colour-css-vars-dark;
    }

    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
      @include colour.colour-css-vars-high-contrast-dark;
    }
  }

  &--dark-theme {
    @include colour.colour-css-vars-dark;

    @media (prefers-contrast: more) {
      @include colour.colour-css-vars-high-contrast-dark;
    }
  }

  &--black-accent {
    @include colour.black-accent;
  }

  &--pink-accent {
    @include colour.pink-accent;
  }

  &--orange-accent {
    @include colour.orange-accent;
  }

  &--yellow-accent {
    @include colour.yellow-accent;
  }

  &--green-accent {
    @include colour.green-accent;
  }

  &--blue-accent {
    @include colour.blue-accent;
  }
}

.tna-background,
.tna-block {
  &-tint {
    @include colour.tint;
  }

  &-contrast {
    @include colour.contrast;
  }

  &-accent {
    @include colour.accent;
  }

  &-accent-light {
    @include colour.accent-light;
  }

  &-base {
    @include colour.base;
  }
}

.tna-border {
  &-keyline {
    @include colour.colour-border("keyline", 1px);
  }

  &-keyline-dark {
    @include colour.colour-border("keyline-dark", 1px);
  }
}

.tna-accent {
  &-black {
    @include colour.black-accent;
  }

  &-pink {
    @include colour.pink-accent;
  }

  &-orange {
    @include colour.orange-accent;
  }

  &-yellow {
    @include colour.yellow-accent;
  }

  &-green {
    @include colour.green-accent;
  }

  &-blue {
    @include colour.blue-accent;
  }
}