@use "./colors.scss";
@use "./accessibility.scss";

// Mixin for applying a red link style
@mixin election-text-link($color: inherit, $text-decoration: none) {
  color: $color;
  text-decoration: $text-decoration;

  @include accessibility.element-focus-styles {
    color: colors.$red-80;
  }

  @content;

  @media (hover: hover) {
    &:hover {
      color: colors.$red-80;
    }
  }

  &:active {
    color: colors.$red-90;
  }
}

@mixin election-red-link() {
  @include election-text-link($color: colors.$politico-red) {
    @content;
  }
}

$election-layers: (
  "ads": 0,
  "content": 10,
  "toggle": 20,
  "nav": 30,
  "tooltip": 40,
  "drawer": 50,
);

@mixin election-layer-zindex($layer, $offset: 0) {
  z-index: map-get($election-layers, $layer) + $offset;
}

@mixin fade-in-animation {
  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
}
