:host {  
  /*@doc Define o tamanho da fonte do componente.*/
  --ez-card-item--font-size: var(--text--medium, 14px);

  /*@doc Define o tamanho da fonte do componente no modo compacto.*/
  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);

  /*@doc Define a família da fonte do componente.*/
  --ez-card-item--font-family: var(--font-pattern, Arial);

  /*@doc Define o peso da fonte do componente.*/
  --ez-card-item--font-weight: var(--font-weight--semi-bold, 600);

  /*@doc Define o peso da fonte do title do componente.*/
  --ez-card-item--font-weight-large: var(--font-weight--semi-bold, 600);

  /*@doc Define a cor da fonte do componente.*/
  --ez-card-item--color: var(--text--primary, #626e82);

  /*@doc Define a cor da fonte da key do componente.*/
  --ez-card-item__key--color: var(--text--primary, #626e82);

  /*@doc Define a cor da fonte do label do detalhe do componente.*/
  --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);

  /*@doc Define a cor da fonte do valor do detalhe do componente.*/
  --ez-card-item__detail-value--color: var(--color--petroleum-500, #404E65);

  /*@doc Define o espaçamento inferior dos detalhes do componente.*/
  --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);

  /*@doc Define o espaçamento inferior do title do componente.*/
  --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);

  /*@doc Define a cor do highlight / marcação nos textos do componente.*/
  --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);

   /*@doc Define o peso da fonte do componente.*/
   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);

  width: 100%;
  display: flex;
  cursor: pointer;
}

.card-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: pointer;
  z-index: 0;
  position: relative;
  container-type: inline-size;
  container-name: box;
  white-space: pre-line;
}

.card-item__detail{
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.95;
}



.card-item__expanded {
  padding: var(--space--medium);
}

.card-item:hover {
  background: #F0F3F7;
  border-radius: 12px;
}

.card-item__title {
  display: flex;
  align-items: center;
  line-height: 18px;
  cursor: pointer;

  /*public*/
  font-size: var(--ez-card-item--font-size);
  font-family: var(--ez-card-item--font-family);
  font-weight: var(--ez-card-item--font-weight-large);
  color: var(--ez-card-item--color);
  padding-bottom: var(--ez-card-item__title--padding-bottom);
  gap: var(--space--small, 6px);
}

.card-item__key {
  /*public*/
  color: var(--ez-card-item__key--color);
}

.card-item__details {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  justify-content: space-between;
  width: 100%;
}

.card-item__details-container__left {
  display: flex;
  flex-direction: column;
  white-space: pre-line;
  cursor: pointer;
  width: 50%;
}

.card-item__details-container__right {
  display: flex;
  flex-direction: column;
  white-space: pre-line;
  width: 50%;
  cursor: pointer;
}

.card-item__detail{
  cursor: pointer;
}

.card-item__detail-default:not(:last-child) {
  padding-bottom: var(--ez-card-item__detail--padding-bottom);
}

.card-item__detail-label {
  cursor: pointer;

  /*public*/
  font-size: var(--ez-card-item--font-size);
  font-family: var(--ez-card-item--font-family);
  font-weight: var(--ez-card-item--detail-label--font-weight);
}

.card-item__detail-value {
  cursor: pointer;
  line-break: anywhere;

  /*public*/
  font-size: var(--ez-card-item--font-size);
  font-family: var(--ez-card-item--font-family);
  font-weight: var(--ez-card-item--font-weight);
  color: var(--ez-card-item__detail-value--color);
}

.card-item__highlight {
  position: relative;
  border-radius: 8px;
  z-index: -1;

  /*public*/
  background-color: var(--ez-card-item__highlight--color);
  outline: 2px solid var(--ez-card-item__highlight--color);
  box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), 
               4px 0px 0px 0px var(--ez-card-item__highlight--color);
}

.card-item__content{
  display: flex;
  align-items: center;
}

.card-item__details-container_default{
  display: flex;
}

.card-item__details-slot{
  margin-left: auto;
}

/* Modo compacto */
.card-item__compacted {
  padding: var(--space--2xs) var(--space--small);
}

.card-item__detail-label-compacted {
  font-size: var(--ez-card-item--font-size-compacted);
}

.card-item__detail-value-compacted {
  font-size: var(--ez-card-item--font-size-compacted);
}

.card-item__title-compacted {
  font-size: var(--ez-card-item--font-size-compacted);
}

.card-item__details-container__left-compacted{
  width: 100%;
}

.card-item__details-container__right-compacted {
  width: 100%;
}


@container box (max-width: 550px) {
  .card-item__details {
    flex-direction: column;
  }

  .card-item__details-container__left {
    width: 100%;
  }
  
  .card-item__details-container__right {
    width: 100%;
  }
}

@container box (max-width: 200px) {
  .card-item__title {
    font-size: 10px;
  }

  .card-item__detail-label {
    font-size: 10px;
  }

  .card-item__detail-value {
    font-size: 10px;
  }

}