/* TW: Final ✔️ - Remove unused classes */
.days {
  view-transition-name: days;
  height: fit-content;
}

.day {
  transition: height 0.3s;
}


.day.expanded {

  .day-container {
    height: auto;
    opacity: 1;
  }

  .add-btn {
    opacity: 1;
  }
}

input[type="checkbox"][switch] {
  transition: background 0.2s;
}

input[type="checkbox"][switch]::before {
  content: "";
  transition: transform 0.2s;
}

input[type="checkbox"][switch]:checked::before {
  transform: translateX(24px);
}

/* Used in JS */
.time-row {
  @apply flex items-center space-x-4;
}

.time-label {
  @apply text-zinc-500 text-lg w-[60px];
}

.time-input {
  @apply border-zinc-300 p-3 text-base border rounded-xl w-[140px];
}

.remove-btn {
  @apply p-2 bg-transparent border-0 cursor-pointer text-zinc-500;
}

.add-btn {
  @apply text-base opacity-0;
  transition: opacity 0.3s;
}

::view-transition-group(*) {
  animation-duration: 0.3s;
}

::view-transition-old(*),
::view-transition-new(*) {
  height: 100%;
}

html:active-view-transition-type(remove) {
  .time-row.remove {
    view-transition-name: removed-row !important;
  }

  &::view-transition-old(removed-row) {
    opacity: 0;
  }
}