@mixin transicao-padrao {
  transition: 0.2s all ease-in-out;
}

@mixin transicao($tempo: 0.2s) {
  transition: $tempo all ease-in-out;
}

@mixin borda-arredondada-padrao($posicao: "padrao") {
  $valor-do-border-radius: 8px;

  @if $posicao == "padrao" {
    border-radius: $valor-do-border-radius;
  }

  @if $posicao == "superior" {
    border-top-left-radius: $valor-do-border-radius;
    border-top-right-radius: $valor-do-border-radius;
  }

  @if $posicao == "inferior" {
    border-bottom-left-radius: $valor-do-border-radius;
    border-bottom-right-radius: $valor-do-border-radius;
  }

  @if $posicao == "direita" {
    border-top-right-radius: $valor-do-border-radius;
    border-bottom-right-radius: $valor-do-border-radius;
  }

  @if $posicao == "esquerda" {
    border-top-left-radius: $valor-do-border-radius;
    border-bottom-left-radius: $valor-do-border-radius;
  }
}

@mixin sombra-padrao($direcao) {
  $opacidade-da-sombra: 0.16;
  $desfoque-da-sombra: 10px;

  @if ($direcao == "baixo") {
    box-shadow: 0px 4px $desfoque-da-sombra rgba($cor-preta, $opacidade-da-sombra);
  }
  @if ($direcao == "cima") {
    box-shadow: 0px -4px $desfoque-da-sombra rgba($cor-preta, $opacidade-da-sombra);
  }
  @if ($direcao == "direita") {
    box-shadow: 4px 0px $desfoque-da-sombra rgba($cor-preta, $opacidade-da-sombra);
  }
  @if ($direcao == "esquerda") {
    box-shadow: -4px 0px $desfoque-da-sombra rgba($cor-preta, $opacidade-da-sombra);
  }
}

@mixin calcular-entrelinhas($tamanho-da-fonte) {
  line-height: $tamanho-da-fonte * 1.4;
}

@mixin fonte-regular {
  font-weight: 400;
}

@mixin fonte-seminegrito {
  font-weight: 600;
}

@mixin fonte-negrito {
  font-weight: 700;
}

@mixin resetar-lista {
  list-style-type: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
}

@mixin resetar-linha {
  height: 1px;
  color: $cor-cinza-30;
  background-color: $cor-cinza-30;
  border: none;
}

@mixin resetar-titulo {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  margin: 0;
  padding: 0;
}

@mixin resetar-paragrafo {
  @include resetar-titulo;
}

@mixin desabilitado {
  opacity: 0.5;
  pointer-events: none;
}

// Pontos de quebra

@mixin quebra-somente-telefone {
  @media (max-width: 599px) {
    @content;
  }
}

@mixin quebra-maior-que-telefone {
  @media (min-width: 600px) {
    @content;
  }
}

@mixin quebra-maior-que-tablet {
  @media (min-width: 900px) {
    @content;
  }
}

@mixin quebra-menor-que-tablet {
  @media (max-width: 899px) {
    @content;
  }
}

@mixin quebra-maior-que-desktop-pequeno {
  @media (min-width: 1200px) {
    @content;
  }
}

@mixin quebra-menor-que-desktop-pequeno {
  @media (max-width: 1199px) {
    @content;
  }
}

@mixin quebra-maior-que-desktop-grande {
  @media (min-width: 1800px) {
    @content;
  }
}

@mixin quebra-menor-que-desktop-grande {
  @media (max-width: 1799px) {
    @content;
  }
}

@mixin sombra-do-botao($cor) {
  box-shadow: 0 2px 2px rgba($cor, 0.3);
}

// Seta para indicar contexto de elementos flutuantes

@mixin seta($posicao: "inferior-centro", $cor: $cor-branca, $tamanho: 8px) {
  $cor-da-sombra: $cor-preta;
  $transparencia-da-sombra: 0.2;
  $margem: 16px;

  &:after {
    content: "";
    position: absolute;
    display: block;
    border: $tamanho solid transparent;

    @if $posicao == "esquerda-centro" or $posicao == "direita-centro" {
      top: 50%;
      transform: translateY(-50%);
    }

    @if $posicao == "inferior-centro" or $posicao == "superior-centro" {
      left: 50%;
      transform: translateX(-50%);
    }

    @if $posicao == "inferior-centro" or $posicao == "inferior-direita" or $posicao == "inferior-esquerda" {
      top: 100%;
      filter: drop-shadow(0 1px 0 rgba($cor-da-sombra, $transparencia-da-sombra));
      border-top-color: $cor;
    }

    @if $posicao == "superior-centro" or $posicao == "superior-direita" or $posicao == "superior-esquerda" {
      bottom: 100%;
      filter: drop-shadow(0 -1px 0 rgba($cor-da-sombra, $transparencia-da-sombra));
      border-bottom-color: $cor;
    }

    @if $posicao == "direita-centro" or $posicao == "direita-superior" or $posicao == "direita-inferior" {
      left: 100%;
      filter: drop-shadow(1px 0 0 rgba($cor-da-sombra, $transparencia-da-sombra));
      border-left-color: $cor;
    }

    @if $posicao == "esquerda-centro" or $posicao == "esquerda-superior" or $posicao == "esquerda-inferior" {
      right: 100%;
      filter: drop-shadow(-1px 0 0 rgba($cor-da-sombra, $transparencia-da-sombra));
      border-right-color: $cor;
    }

    @if $posicao == "direita-superior" or $posicao == "esquerda-superior" {
      top: $margem;
    }

    @if $posicao == "esquerda-inferior" or $posicao == "direita-inferior" {
      bottom: $margem;
    }

    @if $posicao == "inferior-esquerda" or $posicao == "superior-esquerda" {
      left: $margem;
    }

    @if $posicao == "inferior-direita" or $posicao == "superior-direita" {
      right: $margem;
    }
  }
}

// Visibilidade

@mixin esconder-acessivel {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

@mixin truncar-texto {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

// Mixin para declarar uma cor
@mixin definirCorHSL($color, $hue, $saturation, $lightness) {
  #{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");
  #{$color}-h: #{$hue};
  #{$color}-s: #{$saturation};
  #{$color}-l: #{$lightness};
}

//Temas

@mixin tema-digix-ui {
  @include definirCorHSL(--cor-primaria, 265, 100%, 21%);
  @include definirCorHSL(--cor-secundaria, 186, 90%, 44%);
  @include definirCorHSL(--cor-terciaria, 261, 91%, 14%);
}

@mixin tema-nexxus {
  @include definirCorHSL(--cor-primaria, 198, 92%, 43%);
  @include definirCorHSL(--cor-secundaria, 37, 100%, 62%);
  @include definirCorHSL(--cor-terciaria, 203, 100%, 25%);
}

@mixin tema-humani {
  @include definirCorHSL(--cor-primaria, 168, 43%, 48%);
  @include definirCorHSL(--cor-secundaria, 63, 100%, 42%);
  @include definirCorHSL(--cor-terciaria, 166, 89%, 24%);
}

@mixin tema-papel-zero {
  @include definirCorHSL(--cor-primaria, 208, 80%, 49%);
  @include definirCorHSL(--cor-secundaria, 145, 63%, 49%);
  @include definirCorHSL(--cor-terciaria, 207, 86%, 20%);
}

@mixin tema-horus {
  @include definirCorHSL(--cor-primaria, 320, 82%, 35%);
  @include definirCorHSL(--cor-secundaria, 40, 100%, 50%);
  @include definirCorHSL(--cor-terciaria, 316, 100%, 16%);
}

@mixin tema-habix {
  @include definirCorHSL(--cor-primaria, 16, 100%, 46%);
  @include definirCorHSL(--cor-secundaria, 174, 100%, 43%);
  @include definirCorHSL(--cor-terciaria, 13, 100%, 29%);
}

@mixin tema-habix-inscricao-compartilhada {
  @include definirCorHSL(--cor-primaria, 208, 72%, 42%);
  @include definirCorHSL(--cor-secundaria, 208, 72%, 42%);
  @include definirCorHSL(--cor-terciaria, 211, 89%, 32%);
}

@mixin tema-cheff-escolar {
  @include definirCorHSL(--cor-primaria, 151, 83%, 38%);
  @include definirCorHSL(--cor-secundaria, 27, 100%, 55%);
  @include definirCorHSL(--cor-terciaria, 151, 78%, 25%);
}

@mixin tema-ccs {
  @include definirCorHSL(--cor-primaria, 148, 60%, 53%);
  @include definirCorHSL(--cor-secundaria, 199, 83%, 42%);
  @include definirCorHSL(--cor-terciaria, 166, 100%, 17%);
}

@mixin tema-saiems {
  @include definirCorHSL(--cor-primaria, 154, 100%, 40%);
  @include definirCorHSL(--cor-secundaria, 212, 70%, 33%);
  @include definirCorHSL(--cor-terciaria, 150, 59%, 26%);
}

@mixin tema-vistta {
  @include definirCorHSL(--cor-primaria, 0, 17.8%, 53.7%);
  @include definirCorHSL(--cor-secundaria, 36.1, 100%, 59.2%);
  @include definirCorHSL(--cor-terciaria, 0, 17.8%, 32%);
}