/* ============================================
   COMPONENTS CLASSES
   Styles that are better to group 
   in components rather than utilities
   ============================================ */

/* ============================================
   CHIPS
   ============================================ */

.chip-s {
  font-size: var(--text-s);
  line-height: var(--size-s);
  padding: var(--size-2xs) var(--size-xs);
}

.chip-m {
  font-size: var(--text-m);
  line-height: var(--size-m);
  padding: var(--size-xs) var(--size-s);
}

.chip-l {
  font-size: var(--text-l); 
  line-height: var(--size-l);
  padding: var(--size-s) var(--size-m);
}

/* ============================================
   CARDS
   ============================================ */

[class*="card-"] {
  --card-font-size: var(--text-m);
  --card-line-height: var(--size-m);
  --card-margin: var(--size-m);
  --card-inner-margin: var(--size-xs);
}

[class*="card-"] > *:not(:first-child) {
  font-size: var(--card-font-size);
  line-height: var(--card-line-height);
  margin: var(--card-margin);
}

[class*="card-"] > * > * {
  margin: var(--card-inner-margin) 0;
}

[class*="card-"] > * > h3,
[class*="card-"] > * > p {
  font-family: var(--font-body);
  font-size: var(--card-font-size);
  line-height: var(--card-line-height);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--card-inner-margin);
}

[class*="card-"] > * > h3 {
  font-weight: var(--font-weight-bold);
}

.card-xs {
  --card-font-size: var(--text-xs);
  --card-line-height: var(--size-s);
  --card-margin: var(--size-xs);
  --card-inner-margin: var(--size-2xs);
  --card-min-width: var(--size-3xl);
}

.card-s {
  --card-font-size: var(--text-s);
  --card-line-height: var(--size-s);
  --card-margin: var(--size-s);
  --card-inner-margin: var(--size-2xs);
  --card-min-width: var(--size-4xl);
}

.card-m {
  --card-font-size: var(--text-m);
  --card-line-height: var(--size-m);
  --card-margin: var(--size-m);
  --card-inner-margin: var(--size-xs);
  --card-min-width: var(--size-5xl);
}

.card-l {
  --card-font-size: var(--text-l);
  --card-line-height: var(--size-l);
  --card-margin: var(--size-l);
  --card-inner-margin: var(--size-s);
  --card-min-width: var(--size-6xl);
}

/* Cards in Cluster: flexible, grow and shrink */
.el-cluster [class*="card-"] {
  flex: 1 1 var(--card-min-width);
  min-width: 0;
}

/* Cards in Reel day columns: fill the column width */
.week.el-reel .day [class*="card-"] {
  width: 100%;
  flex: none;
}

/* ============================================
   WIDGET CALENDAR (grouped)
   ============================================ */

.calendar {
  display: block;
  container-type: inline-size;
}

.week-name {
  font-size: var(--text-m);
  line-height: var(--size-m);
  font-weight: var(--font-weight-regular);
}

.month {
  display: block;
}

.month-name {
  display: block;
  font-size: var(--text-m);
  line-height: var(--size-m);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--size-s);
}

.calendar[data-card-size="xs"] .week.el-reel .day {
  inline-size: var(--size-3xl);
}

.calendar[data-card-size="s"] .week.el-reel .day {
  inline-size: var(--size-4xl);
}

.calendar[data-card-size="m"] .week.el-reel .day {
  inline-size: var(--size-5xl);
}

.calendar[data-card-size="l"] .week.el-reel .day {
  inline-size: var(--size-6xl);
}

.day {
  min-width: 0;
  flex-shrink: 0;
}

.day-name {
  display: block;
  font-size: var(--text-s);
  line-height: var(--size-s);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--size-xs);
}

.event {
  display: block;
}

/* Hide empty days on mobile, show on desktop (Reel layout only) */
.week.el-reel .day:not(:has(.event)) {
  display: none;
}

@container (min-width: 40rem) {
  .week.el-reel .day:not(:has(.event)) {
    display: flex;
  }
}

/* Single-level groupings with Cluster */
.day.el-cluster,
.week.el-cluster,
.month.el-cluster,
.calendar > .el-cluster {
  align-items: stretch;
}

.day.el-cluster .day-name,
.week.el-cluster .week-name,
.month.el-cluster .month-name {
  flex-basis: 100%;
  margin-bottom: var(--size-xs);
}

/* Reel-specific styles (scoped to avoid affecting Cluster) */
.week.el-reel {
  position: relative;
  padding-top: 2.5rem;
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: var(--size-xs);
  scrollbar-color: var(--color-light, #fff) var(--color-dark, #000);
}

.week.el-reel::-webkit-scrollbar {
  block-size: 1rem;
}

.week.el-reel::-webkit-scrollbar-track {
  background-color: var(--color-dark, #000);
}

.week.el-reel::-webkit-scrollbar-thumb {
  background-color: var(--color-dark, #000);
  background-image: linear-gradient(var(--color-dark, #000) 0, var(--color-dark, #000) 0.25rem, var(--color-light, #fff) 0.25rem, var(--color-light, #fff) 0.75rem, var(--color-dark, #000) 0.75rem);
}

.week.el-reel .week-name {
  position: absolute;
  top: 0;
  left: 0;
}

/* ============================================
   INPUTS
   ============================================ */

.input {
  background-color: var(--color-gray-light-1);
  color: var(--color-neutral-5);
  border-radius: var(--interactions-border-radius);
}

.input::placeholder {
  color: var(--color-neutral-3);
}

.input-with-action {
  display: flex;
  position: relative;
}

.input-with-action input {
  flex: 1;
}

.input-with-action button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border: none;
  background-color: transparent;
  padding: 0 var(--size-xs);
}

.input-with-action button:focus {
  outline: none;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  padding: var(--size-xs);
  font-size: var(--text-m);
  line-height: var(--size-m);
}

input[type="checkbox"] {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
}

input[type="checkbox"] + span {
  display: inline-block;
  width: var(--size-s);
  height: var(--size-s);
  margin-right: var(--size-2xs);
  background-color: var(--color-gray-light-1);
  border-radius: var(--interactions-border-radius);
  flex-shrink: 0;
  cursor: pointer;
  border: var(--border-style-m);
}

input[type="checkbox"]:checked + span {
  background-color: var(--color-neutral-5);
}

/* ============================================
   MESSAGES & STATES
   ============================================ */

.error-message {
  display: none;
}

.error-message:not(:empty) {
  display: block;
  color: var(--color-neutral-4);
  font-size: var(--text-xs);
  line-height: var(--size-m);
  margin-top: var(--size-2xs);
}