.cartao {
  @include borda-arredondada-padrao;
  @include transicao;
  color: $cor-preta;
  width: 100%;
  border: 1px solid $cor-cinza-30;
  background: $cor-branca;
}

.cartao_sem-borda {
  border-color: transparent;
}

%cartao-status {
  .cartao__cabecalho {
    &:before {
      background: currentColor;
    }
  }

  .cartao__titulo {
    color: currentColor;
  }

  .cartao__icone {
    color: currentColor;
  }
}

.cartao_cor-sucesso {
  @extend %cartao-status;
  color: $cor-sucesso;
}

.cartao_cor-erro {
  @extend %cartao-status;
  color: $cor-erro;
}

.cartao_cor-atencao {
  @extend %cartao-status;
  color: $cor-atencao;
}

.cartao_cor-info {
  @extend %cartao-status;
  color: $cor-info;
}

.cartao_cor-primaria {
  @extend %cartao-status;
  color: var(--cor-primaria);
}

.cartao_cor-secundaria {
  @extend %cartao-status;
  color: var(--cor-secundaria);
}

.cartao_cor-terciaria {
  @extend %cartao-status;
  color: var(--cor-terciaria);
}

.cartao_expansivel {
  &:hover,
  &:focus {
    @include sombra-padrao(baixo);
    transform: translateY(-2px);

    .cartao__botao-expandir_animado {
      animation: pula-para-cima 0.3s ease infinite alternate;
    }
  }

  &:focus {
    outline: none;
  }

  .cartao__corpo {
    display: none;
  }
}

.cartao_com-destaque {
  .cartao__cabecalho {
    &:before {
      content: "";
      margin: 0 8px 0 -4px;
      display: block;
      width: 4px;
      align-self: stretch;
      border-radius: 10px;
    }
  }
}

.cartao_com-cabecalho-centralizado-no-celular {
  @include quebra-somente-telefone {
    .cartao__cabecalho {
      flex-direction: column;
      text-align: center;

      .cartao__icone {
        margin: 0 0 8px 0;
        align-self: center;
      }
    }

    .cartao__container-primario {
      padding-left: 0;
    }

    .cartao__container-secundario {
      margin: 8px 0 0 0;
      flex-direction: column;
      align-self: center;
      padding-left: 0;

      & > * {
        margin: 0 0 8px 0;

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }

    &.cartao_com-destaque {
      .cartao__cabecalho {
        &:before {
          display: none;
        }
      }
    }
  }
}

.cartao__cabecalho {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px;
  min-height: 56px;
}

.cartao__container-primario {
  flex-grow: 1;
}

.cartao__container-secundario {
  margin-top: 0;
  box-sizing: border-box;
  display: flex;
  flex-grow: 0;
  align-self: flex-start;
  padding-left: 24px;

  & > * {
    margin: 0 8px 0 0;

    &:last-of-type {
      margin-right: 0;
    }
  }

  @include quebra-maior-que-telefone {
    flex-direction: row;
    align-items: center;
  }
}

.cartao__icone {
  margin: 8px 16px 0 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: 32px;
  line-height: 0;
}

.cartao__titulo {
  @include fonte-negrito;
  @include resetar-titulo;
  color: $cor-preta;
  font-size: 16px;
}

.cartao__subtitulo {
  @include resetar-titulo;
  margin-top: 4px;
  color: $cor-cinza-80;
  font-size: 14px;
}

.cartao__botao-expandir {
  @include transicao;

  &.botao_icone {
    border-radius: 50px;
  }
}

.cartao__botao-expandir_animado {
  &:hover {
    animation: none !important;
  }
}

.cartao__corpo {
  color: $cor-preta;
  padding: 16px;
  border-top: 1px solid $cor-cinza-30;

  &:focus {
    outline: none;
  }
}

.cartao_aberto {
  .cartao__corpo {
    display: block;
  }

  .cartao__botao-expandir_animado {
    animation: none !important;
    transform: rotate(180deg);
  }
}

.cartao__conteudo {
  padding: 5px 16px 16px 16px;
}
.cartao_com-borda-interna-horizontal {
  height: 100%;
  .cartao__cabecalho{
    min-height: auto;
    padding-bottom: 0px;
    &::before{
      content: "";
      display: block;
      height: 4px;
      width: 100%;
      margin: 0 10px 6px 0px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      align-self: self-start;
    }
  }
}