@use './colors.scss';
@use './accessibility.scss';
@use 'sass:map';

// 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;
    }
  }
}