/*
 * Botão (etapa D5) -- o `ButtonPlugin` no site 2.
 *
 * O estático tem **três** classes de botão (`btn-global`, `btn-school`, `btn-channel`) e
 * **um** botão: as três declaram o mesmo azul, a mesma borda de 1px, o mesmo raio de 50px,
 * o mesmo Arial 700, o mesmo hover para azul-claro e a mesma transição. O que difere é
 * tamanho. Por isso `.botao` é um só; as medições estão na D5.
 *
 * **Ordem do arquivo, e ela importa:** base, hover, `@media`, e só então os modificadores.
 * Todos têm a mesma especificidade (0-1-0), então quem vem depois vence -- e é por isso que
 * o `@media` está no meio e não no fim: lá embaixo, cada propriedade nova nele passaria a
 * atropelar `.botao--text` e `.botao--contained` em silêncio.
 */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
   * `min-height`, e não a altura fixa do original. `btn-school` declara 361x68 e
   * `btn-channel` 358x62 -- 3px e 6px de diferença para botões idênticos, que é deriva de
   * desenho, não intenção. Ficou o 68px, que é o dos 7 contra 1. E **sem largura fixa**:
   * 361px estoura em qualquer tela mais estreita que isso, e o original só conserta no
   * mobile, deixando quebrada a faixa entre 361px e 768px.
   */
  min-height: 68px;
  padding: 7px 32px 8px;
  font-family: var(--seb-fonte-corpo);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--seb-azul);
  border: 1px solid var(--seb-azul);
  border-radius: 50px;
  transition: all linear 0.15s;
}

/*
 * O hover é um só para as três variantes, e vence o fundo branco do `contained` por
 * especificidade (`.botao:hover` é 0-2-0). É o que o original faz: `btn-school` é branco e
 * vira azul-claro no hover, como os outros dois.
 */
.botao:hover {
  color: var(--seb-azul);
  background-color: var(--seb-azul-claro);
}

/*
 * O mobile é medido: o original leva os dois botões de largura fixa a `width: 100%`, e o
 * `btn-school` ainda cai para 18px e 46px de altura.
 */
@media (max-width: 768px) {
  .botao {
    width: 100%;
    min-height: 46px;
    font-size: 18px;
  }
}

/*
 * As três variantes do model contra o que o estático mostra:
 *
 * - `outlined` é o fundo transparente -- o `btn-global` e o `btn-channel`, e o que **todos**
 *   os 78 botões do banco usam hoje. Tem regra própria mesmo sendo o padrão: sem ela a
 *   classe que o template escreve não existiria em lugar nenhum do CSS.
 * - `contained` é o `btn-school`, o mesmo pino com fundo branco.
 * - `text` **não tem contrapartida no estático**. Fica como o botão sem caixa -- sem borda,
 *   sem altura mínima e sem a largura total do mobile --, que é a leitura mínima de "só
 *   texto". Mesmo tratamento que a D4 deu ao zoom no hover.
 */
.botao--outlined {
  background-color: transparent;
}

.botao--contained {
  background-color: var(--seb-branco);
}

.botao--text {
  width: auto;
  min-height: 0;
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
}

.botao--text:hover {
  background-color: transparent;
  text-decoration: underline;
}