/**
 * Estilos das abas do portal: barra de abas, item de aba, estado ativo e o
 * marcador inferior da aba selecionada.
 *
 * Responsabilidades:
 * - Estilizar a navegação por abas e destacar a aba ativa em cada ponto de
 *   quebra (acima e abaixo de 472px).
 *
 * 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 A posição deste arquivo na cascata está declarada em build-css.sh;
 *         não reordenar.
 */
.tab {
  border-bottom: 1px solid #D5D5D5;
  padding-bottom: 10px;
  margin-bottom: 15px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tab-item {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.2px;
  color: #AEAEAE;
  padding-left: 25px;
  padding-right: 25px;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.tab-item::after {
  content: "";
  width: 0;
}

.tab-item.active {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  letter-spacing: 0.2px;
  color: #232323;
  position: relative;
  transition: all 300ms ease-in-out;
}

@media (min-width: 472px) {
  .tab-item.active::after {
    content: "";
    border-bottom: 3px solid #686868;
    width: 100%;
    position: absolute;
    top: 24px;
    transition: all 300ms ease-in-out;
  }
}

@media (max-width: 471px) {
  .tab-item.active::after {
    content: "";
    border-bottom: 3px solid #686868;
    width: 100%;
    position: absolute;
    top: 40px;
    transition: all 300ms ease-in-out;
  }
}