@import "tailwindcss/theme";
@import "../variables/theme.css";

.eventInfo {
  padding-bottom: var(--spacing-sm-sm);

  @variant md {
    padding-bottom: var(--spacing-md-sm);
  }

  @variant lg {
    @apply grid grid-cols-12;

    padding-bottom: var(--spacing-lg-sm);
  }
}

.eventInfo-container {
  @apply grid;

  grid-template-rows: repeat(5, auto);
  grid-template-columns: 100%;
  gap: var(--spacing-sm-xs);
  border-bottom: 1px solid var(--color-neutral-400);

  @variant md {
    gap: var(--spacing-md-xs);
  }

  @variant lg {
    @apply col-span-10 col-start-2;

    gap: var(--spacing-lg-xs);
  }
}

.eventInfo-title {
  font: var(--h2-bold);
  font-size: var(--text-heading-sm-lg);
  line-height: var(--leading-heading-sm-lg);

  @variant md {
    font-size: var(--text-heading-md-lg);
    line-height: var(--leading-heading-md-lg);
  }

  @variant lg {
    font-size: var(--text-heading-lg-lg);
    line-height: var(--leading-heading-lg-lg);
  }
}

.eventInfo-information {
  @apply flex flex-col;

  gap: var(--spacing-16);
  font: var(--t5-medium);

  @variant lg {
    @apply flex-row items-start justify-between;
  }
}

.eventInfo-date {
  @apply flex items-center;

  gap: var(--spacing-8);

  @variant lg {
    @apply flex-1/3;
  }
}

.eventInfo-time {
  @apply flex items-center;

  gap: var(--spacing-8);

  @variant lg {
    @apply flex-1/3;
  }
}

.eventInfo-icon {
  --icon-color: var(--color-neutral-300);

  @apply flex-none;
}

.eventInfo-location {
  @apply flex;

  gap: var(--spacing-8);

  @variant lg {
    @apply flex-1/3;
  }
}

.eventInfo-description {
  font: var(--t3-medium);
  color: var(--color-neutral-800);
}

.eventInfo-action {
  @apply mx-auto;
}