/**
 * Botões do portal: primário, secundário, terciário, quaternário, rosa, suas
 * variações de cor (rosa/vermelho), estados (hover, active, disabled) e o
 * seletor de botões (button-selector).
 *
 * Responsabilidades:
 * - Definir a aparência e os estados de todos os botões do portal.
 * - Definir a variação compacta e o seletor de opção em forma de botão.
 *
 * CSS puro, editado à mão: o portal não tem Sass nem build do Tailwind. Depois
 * de editar, rode build-css.sh e comite o public/css/app.css gerado.
 *
 * @package Portal\Recursos\CSS
 * @llmdoc Precisa vir depois de utilitarios.css para que as cores de botão
 *         vençam os utilitários sem variante, e antes das variantes
 *         responsivas (utilitarios-variantes.css), que fecham o app.css.
 */
.btn-primary {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  background: #02ce6a;
  padding: 16px 25px;
  box-sizing: border-box;
  transition: all 100ms;
}

.btn-primary.disabled {
  background: #efefef;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #c5c5c5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  height: 54.72px;
}

.btn-primary.disabled:hover {
  background: #efefef;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #c5c5c5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-primary:hover {
  background: #029f52;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-primary:active {
  background: #029f52;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-primary:disabled {
  background: #efefef;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #c5c5c5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-secondary {
  background: #ffffff;
  border: 1px solid #02ce6a;
  box-sizing: border-box;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  padding: 16px 25px;
  transition: all 100ms;
}

.btn-secondary:hover {
  background: #e0fff0;
  border: 1px solid #02ce6a;
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-secondary:active {
  background: #e0fff0;
  border: 1px solid #02ce6a;
  box-sizing: border-box;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-secondary:disabled {
  background: #efefef;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #c5c5c5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-secondary.pink {
  border: 1px solid #ff28f1;
}

.btn-secondary.pink:hover, .btn-secondary.pink:active {
  border: 1px solid #ff28f1;
  background: #fee0ff;
}

.btn-secondary.red {
  border: 1px solid #e41919;
}

.btn-secondary.red:hover, .btn-secondary.red:active {
  border: 1px solid #e41919;
  background: #ffe0e0;
}

.btn-secondary.disabled {
  background: #efefef;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #c5c5c5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-secondary.disabled:hover {
  background: #efefef;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #c5c5c5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.pink:hover,
.pink:active {
  background: #fff;
  border: 1px solid #ff28f1;
}

.btn-tertiary {
  border: 1px solid #00ff83;
  box-sizing: border-box;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  padding: 16px 25px;
  transition: all 100ms;
}

.btn-tertiary.disabled {
  border: 1px solid #7f7f7f;
  box-sizing: border-box;
  border-radius: 5px;
  transition: all 100ms;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #7f7f7f;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-tertiary.disabled:hover {
  border: 1px solid #7f7f7f;
  box-sizing: border-box;
  border-radius: 5px;
  transition: all 100ms;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #7f7f7f;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-tertiary:hover {
  background: rgba(224, 255, 240, 0.13);
  border: 1px solid #00ff83;
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-tertiary:active {
  background: rgba(224, 255, 240, 0.12);
  border: 1px solid #00ff83;
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-tertiary:disabled {
  border: 1px solid #7f7f7f;
  box-sizing: border-box;
  border-radius: 5px;
  transition: all 100ms;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #7f7f7f;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-quaternary {
  background: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  padding: 16px 25px;
  transition: all 100ms;
}

.btn-quaternary.disabled {
  background: #a2ffc8;
  opacity: 0.8;
  border-radius: 5px;
  transition: all 100ms;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #02ce6a;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-quaternary.disabled:hover {
  background: #a2ffc8;
  opacity: 0.8;
  border-radius: 5px;
  transition: all 100ms;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #02ce6a;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-quaternary:hover {
  background: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-quaternary:active {
  background: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-quaternary:disabled {
  background: #a2ffc8;
  opacity: 0.8;
  border-radius: 5px;
  transition: all 100ms;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #02ce6a;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-pink {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  background: #ff28f1;
  padding: 16px;
  box-sizing: border-box;
  transition: all 100ms;
}

.btn-pink.disabled {
  background: #efefef;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #c5c5c5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-pink.disabled:hover {
  background: #efefef;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #c5c5c5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-pink:hover {
  background: #ff28f1;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-pink:active {
  background: #ff28f1;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  transition: all 100ms;
}

.btn-pink:disabled {
  background: #efefef;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: #c5c5c5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-primary.compact,
.btn-secondary.compact,
.btn-tertiary.compact,
.btn-quaternary.compact,
.btn-pink.compact {
  padding: 7px 12px;
}

.button-selector {
  background: #FFFFFF;
  border: 1px solid #F3F3F3;
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  padding: 15px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  align-items: center;
  letter-spacing: 0.2px;
  color: #232323;
  cursor: pointer;
  justify-content: space-between;
  transition: all 300ms ease-in-out;
}

.button-selector.active {
  border: 1px solid #FF28F1;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  align-items: center;
  letter-spacing: 0.2px;
  color: #232323;
  transition: all 300ms ease-in-out;
}

@media (min-width: 1024px) {
  .button-selector {
    margin-bottom: 10px;
    max-width: 270px;
  }

  .button-selector::after {
    background: url("../svg/chevron-gray-right.svg") no-repeat;
    content: "";
    width: 10px;
    height: 16px;
    transition: all 300ms ease-in-out;
  }

  .button-selector.active::after {
    background: url("../svg/chevron-pink-right.svg") no-repeat;
    content: "";
    width: 10px;
    height: 16px;
    transition: all 300ms ease-in-out;
  }
}

@media (max-width: 1023px) {
  .button-selector {
    margin-bottom: 24px;
  }

  .button-selector::after {
    background: url("../svg/chevron-gray-up.svg") no-repeat;
    content: "";
    width: 17px;
    height: 9px;
    transition: all 300ms ease-in-out;
  }

  .button-selector.active::after {
    background: url("../svg/chevron-pink-down.svg") no-repeat;
    content: "";
    width: 17px;
    height: 9px;
    transition: all 300ms ease-in-out;
  }
}