// Bloco

.botao {
  @include borda-arredondada-padrao;
  @include fonte-negrito;
  position: relative;
  display: inline-block;
  height: 40px;
  padding: 0 16px;
  background-color: $cor-botao-acao;
  font-family: $fonte-padrao;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  color: $cor-botao-acao-invertida;
  border: 2px solid transparent;
  transition: 0.2s background-color, 0.2s border;
  cursor: pointer;

  &:hover,
  &:focus {
    background-color: scale-color($cor-botao-acao, $lightness: -20%);
  }

  &:focus {
    outline: none;
  }

  &:active {
    box-shadow: none !important;
    top: 2px;
  }
}

.botao:not(.botao_contorno):not(.botao_sem-preenchimento) {
  @include sombra-do-botao($cor-botao-acao);
}

a.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &:hover {
    text-decoration: none;
  }
}

// Modificadores de tipo

.botao_contorno {
  border: 2px solid rgba($cor-botao-acao, 0.5);
  color: $cor-botao-acao;
  background-color: transparent;

  &:hover,
  &:focus {
    border: 2px solid $cor-botao-acao;
    background-color: transparent;
  }
}

.botao_sem-preenchimento {
  color: $cor-botao-acao;
  background-color: transparent;
  border: 2px solid transparent;

  &:hover,
  &:focus {
    background-color: rgba($cor-botao-acao, 0.1);
  }

  &:focus {
    border: 2px solid rgba($cor-botao-acao, 0.5);
  }
}

.botao_largura-total {
  width: 100%;
}

// Modificadores de tamanho

$tamanho-dos-botoes: (
  pequeno: (
    altura: 32px,
    padding-lateral: 8px,
    tamanho-da-fonte: 14px
  ),
  medio: (
    altura: 40px,
    padding-lateral: 16px,
    tamanho-da-fonte: 16px
  ),
  grande: (
    altura: 48px,
    padding-lateral: 24px,
    tamanho-da-fonte: 18px
  )
);

@each $nome, $propriedades in $tamanho-dos-botoes {
  $altura: map-get($propriedades, altura);
  $padding-lateral: map-get($propriedades, padding-lateral);
  $tamanho-da-fonte: map-get($propriedades, tamanho-da-fonte);

  .botao_#{$nome} {
    height: $altura;
    padding: 0 $padding-lateral;
    font-size: $tamanho-da-fonte;

    &.botao_icone {
      width: $altura;
    }
  }
}

// Modificadores para ícones

.botao_icone {
  align-items: center;
  justify-content: center;
  padding: 0;
}

$margem-do-icone-para-o-texto: 8px;

@mixin botao-com-icone {
  [class*="fa-"] {
    flex-shrink: 0;
    @content;
  }
}

.botao_com-icone-para-esquerda {
  @include botao-com-icone {
    margin-right: $margem-do-icone-para-o-texto;
  }
}

.botao_com-icone-para-direita {
  @include botao-com-icone {
    margin-left: $margem-do-icone-para-o-texto;
  }
}

// Modificadores de cores

@each $nome, $cores in $cores-dos-botoes {
  $cor: nth($cores, 1);

  .botao_#{$nome} {
    color: $cor-branca;
    background-color: $cor;

    &:not(.botao_contorno):not(.botao_sem-preenchimento) {
      @include sombra-do-botao($cor);
    }

    &:hover,
    &:focus {
      background-color: scale-color($cor, $lightness: -20%);
    }
  }

  .botao_contorno {
    &.botao_#{$nome} {
      color: $cor;
      border: 2px solid rgba($cor, 0.5);
      background-color: transparent;

      &:hover,
      &:focus {
        border: 2px solid $cor;
      }
    }
  }

  .botao_sem-preenchimento {
    &.botao_#{$nome} {
      color: $cor;
      background-color: transparent;

      &:hover,
      &:focus {
        background-color: rgba($cor, 0.1);
      }

      &:focus {
        border: 2px solid rgba($cor, 0.1);
      }
    }
  }

  .botao_invertido, // <= DESCONTINUADO
  .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno) {
    &.botao_#{$nome} {
      color: $cor;
      background-color: $cor-branca;

      &:hover,
      &:focus {
        background: rgba($cor-branca, 0.8);
      }
    }
  }
}

// Modificadores de cores

$novas-cores: ("primaria", "secundaria", "terciaria");

@each $nome in $novas-cores {
  .botao_cor-#{$nome} {
    background-color: var(--cor-#{$nome});
    &:not(.botao_contorno):not(.botao_sem-preenchimento) {
      box-shadow: 0 2px 2px transparencia(--cor-#{$nome}, 0.3);
    }

    &:hover,
    &:focus {
      background-color: escurecer(--cor-#{$nome}, 10%);
    }
  }

  .botao_contorno {
    &.botao_cor-#{$nome} {
      color: var(--cor-#{$nome});
      border: 2px solid transparencia(--cor-#{$nome}, 0.5);
      background-color: transparent;

      &:hover,
      &:focus {
        border: 2px solid var(--cor-#{$nome});
      }
    }
  }

  .botao_sem-preenchimento {
    &.botao_cor-#{$nome} {
      color: var(--cor-#{$nome});
      background-color: transparent;

      &:hover,
      &:focus {
        background-color: transparencia(--cor-#{$nome}, 0.1);
      }

      &:focus {
        border: 2px solid transparencia(--cor-#{$nome}, 0.1);
      }
    }
  }

  .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno) {
    &.botao_cor-#{$nome} {
      color: var(--cor-#{$nome});
      background-color: var(--cor-branca);

      &:hover,
      &:focus {
        background: rgba($cor-branca, 0.8);
      }
    }
  }
}

// Modificadores de estado

.botao_desabilitado,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  @include desabilitado;
}