.vuecal--default-theme {
  --vuecal-primary-color: #1976D2;
  --vuecal-secondary-color: #fff;
  --vuecal-base-color: #000;
  --vuecal-contrast-color: #fff;
  --vuecal-border-color: color-mix(in srgb, var(--vuecal-base-color) 8%, transparent);
  --vuecal-header-color: var(--vuecal-secondary-color);
  --vuecal-event-color: var(--vuecal-contrast-color);
  --vuecal-event-border-color: currentColor;
  --vuecal-border-radius: 6px;
  --vuecal-height: 500px;
  --vuecal-min-schedule-width: 0;
  --vuecal-min-cell-width: 1em; // Default to minimum 1 letter in weekdays headers.

  position: relative;
  border-radius: var(--vuecal-border-radius);
  color: var(--vuecal-base-color);
  height: var(--vuecal-height);

  &.vuecal--dragging-event {cursor: grabbing;}
  &.vuecal--resizing-event {cursor: ns-resize;}

  // Dark theme.
  // ------------------------------------------------------
  &.vuecal--dark {
    --vuecal-primary-color: #316191;
    --vuecal-secondary-color: #2e2e2e;
    --vuecal-base-color: #fff;
    --vuecal-contrast-color: #000;
    --vuecal-border-color: color-mix(in srgb, var(--vuecal-base-color) 8%, transparent);
    --vuecal-header-color: var(--vuecal-base-color);
    --vuecal-event-color: var(--vuecal-base-color);
    --vuecal-event-border-color: color-mix(in srgb, var(--vuecal-base-color) 50%, transparent);
  }

  // Calendar Header.
  // ------------------------------------------------------
  .vuecal__header {
    background-color: var(--vuecal-primary-color);
    color: var(--vuecal-header-color);
    border-top-left-radius: var(--vuecal-border-radius);
    border-top-right-radius: var(--vuecal-border-radius);
  }

  .vuecal__views-bar,
  .vuecal__title-bar {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .vuecal__title-bar {
    position: relative;
    background-color: var(--vuecal-primary-color);
    padding-left: 0.6em;
    padding-right: 0.6em;
    background-color: color-mix(in srgb, var(--vuecal-secondary-color) 20%, transparent);
  }

  .vuecal__view-button,
  .vuecal__nav,
  button.vuecal__title {
    background: none;
    border: none;
    color: inherit;

    &:not([disabled]) {cursor: pointer;}
  }

  .vuecal__view-button,
  .vuecal__nav,
  button.vuecal__title,
  .vuecal__nav--today {
    transition: 0.3s;
    border: 1px solid transparent;
    padding: 2px 12px;
    border-radius: 4px;
    align-self: center;

    &:hover {background-color: rgba(#fff, 0.12);}
    &--active, &--active:hover {background-color: rgba(#fff, 0.25);}
    &:active {background-color: rgba(#fff, 0.25);}
    &:focus-visible {border-color: rgba(#fff, 0.75);}
  }

  .vuecal__view-button {
    text-transform: uppercase;
    font-size: 0.9em;
  }

  button.vuecal__title {line-height: 0.9;}

  .vuecal__nav--prev,
  .vuecal__nav--next {
    width: 2em;
    aspect-ratio: 1;
    border-radius: 99em;

    &:dir(rtl) {
      transform: rotate(180deg);
    }
  }

  .vuecal__nav--today {
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 3px;
    font-size: 0.85em;
  }

  // Calendar scrollable.
  // ------------------------------------------------------
  .vuecal__scrollable-wrap {
    background-color: color-mix(in srgb, var(--vuecal-primary-color) 4%, transparent);
    border: 1px solid var(--vuecal-border-color);
    border-top: none;
    border-bottom-left-radius: var(--vuecal-border-radius);
    border-bottom-right-radius: var(--vuecal-border-radius);
    // Cut off any content inside to respect the outer border radius.
    // a tooltip inside the body would be truncated, but can be teleported with Vue.
    overflow: hidden;

    // If the header is hidden apply the border radius all around.
    &:first-child {
      border-top-left-radius: var(--vuecal-border-radius);
      border-top-right-radius: var(--vuecal-border-radius);
    }
  }

  .vuecal__scrollable {
    display: grid;
    grid-template-columns: 1fr 0fr;

    &--row {grid-template-columns: 0fr 1fr;}

    // Always use .vuecal__scrollable for view specific override for Vue transition to be smooth.
    &--no-schedules {--vuecal-schedules-bar-height: 0px;}
    &--day-view {--vuecal-weekday-bar-height: 0px;}
    &--month-view, &--no-all-day-bar {--vuecal-all-day-bar-height: 0px;}
    &--year-view, &--years-view {overflow: hidden;} // Useful while transitioning.
  }
  .vuecal__scrollable--day-view .vuecal__body,
  .vuecal__scrollable--days-view .vuecal__body,
  .vuecal__scrollable--week-view .vuecal__body {
    max-height: var(--vuecal-body-max-height, initial);
  }

  // Calendar Weekdays Headers.
  // ------------------------------------------------------
  .vuecal__week-number small {
    width: 1.4em;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    font-size: 0.8em;
    background-color: color-mix(in srgb, var(--vuecal-base-color) 8%, transparent);
    color: color-mix(in srgb, var(--vuecal-base-color) 70%, transparent);
    border-radius: 4px;
  }

  .vuecal__weekday {
    display: flex;
    justify-content: center;
    padding: 2px 1px;
    overflow: hidden;
    letter-spacing: -0.03em;
    text-overflow: ellipsis;
    gap: 4px;
    font-size: 0.95em;
    background-color: var(--vuecal-secondary-color);

    &--today {font-weight: bold;}

    &-day {
      display: inline-block; // For ellipsis.
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0.8;
    }
    &-date {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: color-mix(in srgb, var(--vuecal-base-color) 15%, transparent);
      aspect-ratio: 1;
      width: 1.7em;
      border-radius: 99em;
      overflow: hidden;
      line-height: 1;
      font-size: 0.9em;
      letter-spacing: -0.1em;
      text-indent: -0.15em;
    }
    &--today .vuecal__weekday-date {
      background-color: color-mix(in srgb, var(--vuecal-primary-color) 80%, transparent);
      color: #fff;
    }
  }
  &.vuecal--light .vuecal__weekday:not(.vuecal__weekday--today) .vuecal__weekday-date {
    background-color: color-mix(in srgb, var(--vuecal-primary-color) 20%, transparent);
  }

  // Always use .vuecal__scrollable for view specific override for Vue transition to be smooth.
  .vuecal__scrollable--has-schedules .vuecal__weekday {padding: 0;}
  .vuecal__scrollable--has-schedules .vuecal__weekday-date {width: 1.5em;}

  // Calendar Body > Calendar Cell.
  // ------------------------------------------------------
  .vuecal__cell {
    overflow: hidden;
    box-shadow: 0 0 0 0.5px var(--vuecal-border-color) inset;
  }
  // Always use .vuecal__scrollable for view specific override for Vue transition to be smooth.
  &.vuecal--lg .vuecal__scrollable--month-view .vuecal__cell {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .vuecal__cell:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  &.vuecal--light .vuecal__cell:before {filter: saturate(2);}

  .vuecal__cell--today:before,
  .vuecal__cell--current-month:before,
  .vuecal__cell--current-year:before {
    background-color: color-mix(in srgb, var(--vuecal-primary-color) 10%, transparent);
  }
  .vuecal__cell--selected:before {
    background-color: color-mix(in srgb, var(--vuecal-primary-color) 25%, transparent);
  }
  &.vuecal--light {
    .vuecal__cell--today:before,
    .vuecal__cell--current-month:before,
    .vuecal__cell--current-year:before {
      background-color: color-mix(in srgb, var(--vuecal-primary-color) 5%, transparent);
    }
    .vuecal__cell--selected:before {
      background-color: color-mix(in srgb, var(--vuecal-primary-color) 10%, transparent);
    }
  }

  .vuecal__cell-date {
    position: sticky;
    top: 0;
    font-weight: bold;
  }
  .vuecal__cell--disabled .vuecal__cell-date {opacity: 0.5;}

  // Always use .vuecal__scrollable for view specific override for Vue transition to be smooth.
  &:is(.vuecal--sm, .vuecal--lg) .vuecal__scrollable--month-view {
    .vuecal__cell:before {display: none;}
    .vuecal__cell-date {
      padding: 4px;
      border-radius: 99em;
      width: 2em;
      aspect-ratio: 1;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin: 4px;
      font-size: 13px;
      letter-spacing: -0.5px;
      background-color: color-mix(in srgb, var(--vuecal-primary-color) 25%, transparent);
    }
    .vuecal__cell--today .vuecal__cell-date {
      background-color: color-mix(in srgb, var(--vuecal-primary-color) 60%, transparent);
    }
    .vuecal__cell--selected .vuecal__cell-date {background-color: var(--vuecal-primary-color);}
  }
  &.vuecal--light:is(.vuecal--sm, .vuecal--lg) .vuecal__scrollable--month-view {
    .vuecal__cell-date {background-color: color-mix(in srgb, var(--vuecal-primary-color) 8%, transparent);}
    .vuecal__cell--today .vuecal__cell-date {background-color: color-mix(in srgb, var(--vuecal-primary-color) 22%, transparent);}
    .vuecal__cell--selected .vuecal__cell-date {background-color: color-mix(in srgb, var(--vuecal-primary-color) 40%, transparent);}
  }

  .vuecal__cell--out-of-scope .vuecal__cell-date {opacity: 0.4;}

  .vuecal__scrollable--month-view .vuecal__cell-events {
    overflow: hidden;
    flex-grow: 1;
    width: 100%;
    padding-left: 4px;
  }
  &.vuecal--timeless .vuecal__cell-events {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 4px;
    gap: 4px;
  }
  .vuecal__scrollable--no-schedules.vuecal__scrollable--day-view .vuecal__cell-events,
  .vuecal__scrollable--no-schedules.vuecal__scrollable--days-view .vuecal__cell-events,
  .vuecal__scrollable--no-schedules.vuecal__scrollable--week-view .vuecal__cell-events {
    position: absolute;
    inset: 0 8px 0 0;

    &:dir(rtl) {
      inset: 0 0 0 8px;
    }
  }
  .vuecal__all-day .vuecal__cell-events {width: 100%;inset: 0;}

  // Calendar Body > Time column.
  // ------------------------------------------------------
  .vuecal__time-cell {
    display: flex;
    justify-content: flex-end;
  }

  .vuecal__time-cell-label {
    font-size: 11px;
    letter-spacing: -0.5px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: -1px;
    margin-top: -7.5px;
    background: #fff;
    width: 98%;
    z-index: 1;
    padding-right: 2px;
    align-self: flex-start;
  }
  .vuecal__time-cell:nth-child(1) .vuecal__time-cell-label {
    margin-top: -1px;
    font-size: 10px;
    background: none;
  }

  // Calendar events.
  // ------------------------------------------------------
  .vuecal__event {
    display: flex;
    width: 90%;
    background-color: var(--vuecal-primary-color);
    color: var(--vuecal-event-color);
    border: 1px solid var(--vuecal-event-border-color);
    border-radius: 4px;
    line-height: 1;
    z-index: 1;

    &--background {
      width: 100%;
      border: none;
      border-radius: 0;
      overflow: visible;
      z-index: 0;
    }
    &--cut-top {
      border-top: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    &--cut-bottom {
      border-bottom: none;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    // Bring to front on hover, but under the headings bar and time column.
    &:not(.vuecal__event--background):hover {z-index: 3;}

    &-details {
      flex-grow: 1;
      overflow: hidden;
      padding: 2px;
      font-size: 12px;
    }
    &-time {
      white-space: nowrap;
      line-height: 1;
      letter-spacing: -0.5px;
      font-size: 11px;
    }
    &-comma {padding-right: 4px;}

    &-resizer {
      // Over border (so there's no risk of triggering the event drag instead).
      inset: auto -1px -1px;
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }
    &-delete {
      position: absolute;
      top: -5px;
      right: -5px;
      padding: 2px;
      font-size: 0.8em;
      cursor: pointer;
      background-color: #ff4242;
      border: 1px solid rgba(#fff, 0.5);
      color: transparent;
      border-radius: 99em;
      aspect-ratio: 1;
      width: 1.5em;

      &:before, &:after {
        content: '';
        position: absolute;
        border-radius: 99em;
        top: 50%;
        height: 2px;
        left: 20%;
        right: 20%;
        background-color: var(--vuecal-event-color);
      }
      &:before {transform: translateY(-50%) rotate(45deg);}
      &:after {transform: translateY(-50%) rotate(-45deg);}
    }
  }
  &.vuecal--timeless .vuecal__event {
    position: relative;
    width: 100%;
  }

  .vuecal__scrollable--month-view .vuecal__event {
    padding-top: 1px;
    padding-bottom: 1px;
    width: 100%;
  }
  .vuecal__scrollable--month-view .vuecal__event-details {
    display: flex;
    padding-top: 1px;
    padding-bottom: 1px;
  }

  // Horizontal layout.
  // ------------------------------------------------------
  &.vuecal--horizontal {
    --vuecal-all-day-bar-height: 10rem;

    .vuecal__scrollable {
      grid-template-columns: auto;
      grid-template-rows: 0fr 1fr;
    }

    .vuecal__time-column {
      flex-direction: row;
      align-self: flex-start;
      padding-top: 0;
      padding-left: calc(var(--vuecal-weekday-bar-height) + var(--vuecal-schedules-bar-height) + var(--vuecal-all-day-bar-height));
      top: 0;
      left: 0;
      border-right: none;
      border-bottom: 0.5px solid var(--vuecal-border-color);
      transition: padding-left 0.3s ease-in-out;
      height: 25px;
    }

    .vuecal__all-day-label {
      top: 0;
      left: 0;
      height: 100%;
      width: calc(var(--vuecal-weekday-bar-height) + var(--vuecal-schedules-bar-height) + var(--vuecal-all-day-bar-height));
      margin-top: 0;
      margin-left: calc((var(--vuecal-weekday-bar-height) + var(--vuecal-schedules-bar-height) + var(--vuecal-all-day-bar-height)) * -1);
      padding-top: 0;
      padding-left: calc(var(--vuecal-weekday-bar-height) + var(--vuecal-schedules-bar-height));
      border-bottom: none;
      border-right: 0.5px solid var(--vuecal-border-color);
    }

    .vuecal__time-cell {
      width: var(--vuecal-time-cell-height);
      height: 100%;
      align-items: center;

      label {
        padding: 0;
        line-height: 1;
      }
    }

    .vuecal__scrollable--day-view.vuecal__scrollable--no-schedules .vuecal__time-cell:first-child label,
    .vuecal__scrollable--has-all-day-bar .vuecal__time-cell:not(.vuecal__time-cell + .vuecal__time-cell) label {
      margin-top: 0;
      font-size: inherit;
      opacity: 0.5;
    }

    .vuecal__body-wrap {
      flex-direction: row;
      min-width: unset;
      min-height: 0;
    }

    .vuecal__headings {
      top: auto;
      left: 0;
      flex-direction: row;
      flex-shrink: 0;
      height: 100%;
      width: calc(var(--vuecal-weekday-bar-height) + var(--vuecal-schedules-bar-height) + var(--vuecal-all-day-bar-height));
    }

    .vuecal__body {
      --vuecal-grid-columns: 1;
      --vuecal-grid-rows: 7;

      grid-template-columns: repeat(var(--vuecal-grid-columns), 1fr);
      grid-template-rows: repeat(var(--vuecal-grid-rows), 1fr);
      width: 100%;
      height: auto;
    }

    .vuecal__weekdays-headings {
      flex-direction: column;
      text-align: right;
    }

    .vuecal__weekday {
      justify-content: flex-end;
      padding: 0 6px;
      box-shadow: 0 0 0 0.5px var(--vuecal-border-color) inset;
    }

    .vuecal__all-day {
      flex-direction: column;
      height: 100%;
      width: var(--vuecal-all-day-bar-height);

      &-resizer {
        bottom: 0;
        right: 0;
        height: 100%;
        width: 1px;
        cursor: col-resize;

        &:before {inset: 0 -5px;}
      }
    }

    .vuecal__now-line {
      left: auto;
      top: 0;
      width: 0;
      height: 100%;
      border-top: none;
      border-left: 1px solid;
      border-color: rgba(255, 0, 0, 0.6);
      z-index: 3;

      &:before {
        left: -6px;
        top: auto;
        bottom: 0;
        border-left-color: transparent;
        border-bottom-color: inherit;
      }

      span {left: 2px;}
    }

    .vuecal__scrollable--no-schedules.vuecal__scrollable--day-view .vuecal__cell-events,
    .vuecal__scrollable--no-schedules.vuecal__scrollable--days-view .vuecal__cell-events,
    .vuecal__scrollable--no-schedules.vuecal__scrollable--week-view .vuecal__cell-events {
      inset: 0 0 8px;
    }

    .vuecal--default-theme .vuecal__event {
      width: auto;
      height: 90%;
    }

    &.vuecal--view-has-time .vuecal__cell:before {
      background: linear-gradient(90deg, var(--vuecal-border-color) 0, transparent 1px var(--vuecal-time-cell-height)) 0 1px;
      background-size: var(--vuecal-time-cell-height) 100%;
    }
  }

  // Sm and xs layouts.
  // ------------------------------------------------------
  &.vuecal--sm {
    .vuecal__view-button,
    .vuecal__nav,
    .vuecal__title button,
    .vuecal__nav--today {padding-left: 8px;padding-right: 8px;}
  }
  &.vuecal--xs {
    width: 350px;
    height: 250px;

    .vuecal__view-button,
    .vuecal__nav,
    .vuecal__title button,
    .vuecal__nav--today {padding-left: 4px;padding-right: 4px;}

    .vuecal__title {gap: 4px;}
    .vuecal__title small {padding-left: 3px;padding-right: 3px;}

    .vuecal__body {width: 100%;}
    // Always use .vuecal__scrollable for view specific override for Vue transition to be smooth.
    .vuecal__scrollable--year-view .vuecal__body,
    .vuecal__scrollable--years-view .vuecal__body {margin: auto;}
  }

  // Date picker.
  // ------------------------------------------------------
  &.vuecal--date-picker {
    font-size: 12px;
    width: 210px;

    &:has(.vuecal__views-bar) {height: 260px;}

    .vuecal__views-bar, .vuecal__title-bar {
      padding-top: 2px;
      padding-bottom: 2px;
      height: 2em; // Fixed height for taller character locales like ja and cn.
    }
    .vuecal__title-bar {padding-left: 0.3em;padding-right: 0.3em;}
    .vuecal__nav--today, .vuecal__view-button {font-size: 0.9em;}
    .vuecal__nav--prev, .vuecal__nav--next {width: 1.6em;}
    .vuecal__nav--prev:before, .vuecal__nav--next:before {padding: 0.22em;}
    .vuecal__weekday {font-size: 0.95em;}

    .vuecal__body {padding: 2px;gap: 2px;}
    // Always use .vuecal__scrollable for view specific override for Vue transition to be smooth.
    .vuecal__scrollable--year-view .vuecal__body {padding: 0.6em;gap: 0.8em;}
    .vuecal__scrollable--month-view .vuecal__body,
    .vuecal__scrollable--year-view .vuecal__body,
    .vuecal__scrollable--years-view .vuecal__body {align-items: center;}

    .vuecal__cell {
      aspect-ratio: 1;
      border-radius: 99em;
      font-weight: bold;
      font-size: 1em;
      box-shadow: none;
    }
    .vuecal__scrollable--day-view .vuecal__cell,
    .vuecal__scrollable--days-view .vuecal__cell,
    .vuecal__scrollable--week-view .vuecal__cell {
      aspect-ratio: initial;
      border-radius: 0;
      font-weight: normal;
    }
    // Always use .vuecal__scrollable for view specific override for Vue transition to be smooth.
    .vuecal__scrollable--years-view .vuecal__cell {padding: 6px;}
    .vuecal__scrollable--month-view .vuecal__cell,
    .vuecal__scrollable--years-view .vuecal__cell {font-size: 0.9em;}
    .vuecal__cell-date {font-weight: bold;}

    &.vuecal--dark .vuecal__cell--today:before,
    &.vuecal--dark .vuecal__cell--current-month:before,
    &.vuecal--dark .vuecal__cell--current-year:before {background-color: color-mix(in srgb, var(--vuecal-primary-color) 50%, transparent)}
    &.vuecal--dark .vuecal__scrollable--month-view .vuecal__cell--selected:before,
    &.vuecal--dark .vuecal__scrollable--year-view .vuecal__cell--selected:before,
    &.vuecal--dark .vuecal__scrollable--years-view .vuecal__cell--selected:before {background-color: var(--vuecal-primary-color);}
  }

  &.vuecal--date-picker.vuecal--light {
    .vuecal__cell--today:before,
    .vuecal__cell--current-month:before,
    .vuecal__cell--current-year:before {background-color: color-mix(in srgb, var(--vuecal-primary-color) 12%, transparent);}
    .vuecal--dark .vuecal__scrollable--month-view .vuecal__cell--selected:before,
    .vuecal--dark .vuecal__scrollable--year-view .vuecal__cell--selected:before,
    .vuecal--dark .vuecal__scrollable--years-view .vuecal__cell--selected:before {background-color: color-mix(in srgb, var(--vuecal-primary-color) 28%, transparent);}
  }
}
