/**
* Scrollbar mixin for the Nova Design System
* This mixin provides consistent scrollbar styling for components
*
* Usage:
* @include scrollbar();
*/
/* TODO: integrate this logic in the proper structure */
nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {
  background: var(--components-slider-track-filled-hover);
}
nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {
  border-color: var(--components-slider-track-filled-hover);
}
nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {
  background: var(--components-slider-track-filled-focus);
}
nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {
  border-color: var(--components-slider-track-filled-focus);
}
nv-fieldslider[error] .slider-container .track-container .track .track-range {
  background: var(--components-slider-track-filled-error);
}
nv-fieldslider[error] .slider-container .track-container .track .thumb {
  border-color: var(--components-slider-track-filled-error);
}
nv-fieldslider[error] .slider-container .track-container .track .thumb:hover {
  border-color: var(--components-slider-track-filled-error);
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
  outline-offset: calc(var(--focus-outline-offset) * 1);
  background-color: var(--components-slider-handler-background-error);
}
nv-fieldslider[error] .slider-container .track-container .track .thumb:focus {
  border-color: var(--components-slider-track-filled-error);
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
  outline-offset: calc(var(--focus-outline-offset) * 1);
  background-color: var(--components-slider-track-filled-error);
}
nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {
  background: var(--components-slider-track-filled-error);
}
nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {
  border-color: var(--components-slider-track-filled-error);
}

nv-calendar {
  display: block;
}

.datepicker-root {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: auto;
}

.datepicker-container {
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--components-calendar-background);
  border-radius: var(--calendar-radius);
  padding: var(--calendar-padding);
  box-shadow: 0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);
  border: 1px solid var(--components-calendar-border);
  width: auto;
  max-width: 100%;
}

.datepicker-container-single {
  max-width: 300px;
}
.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),
.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right) {
  max-width: 410px !important;
}
.datepicker-container-single:has(.shortcuts-placement-left), .datepicker-container-single:has(.shortcuts-placement-right) {
  max-width: 410px !important;
}

.datepicker-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.datepicker-wrapper::-webkit-scrollbar-track {
  background-color: var(--color-level-10-background);
  border-radius: 9999px;
}
.datepicker-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-200);
  border-radius: 9999px;
}
.datepicker-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--calendar-gap-x);
  width: auto;
  overflow-x: hidden;
}

.datepicker-wrapper.single {
  justify-content: center;
}

.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--calendar-padding);
  width: auto;
  position: relative;
}

.calendar-separator {
  width: 1px;
  background: var(--components-calendar-border);
  height: auto;
  min-height: 100%;
  margin: 0 10px;
}

.header {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: var(--calendar-header-margin-bottom);
  width: 100%;
}
.header nv-iconbutton {
  width: var(--calendar-header-button-size);
  height: var(--calendar-header-button-size);
}

.nav-buttons {
  display: flex;
  gap: var(--spacing-0);
  margin-left: auto;
}

.nav-left {
  order: -1;
}

.date-controls {
  display: flex;
  gap: var(--spacing-1);
  align-items: center;
  min-height: 34px;
  justify-content: center;
}
.datepicker-container-single .date-controls {
  justify-content: flex-start;
}
.datepicker-container:not(.datepicker-container-single) .date-controls {
  justify-content: start;
  flex-grow: 1;
}
.date-controls select {
  appearance: base-select;
}
.date-controls select::picker(select) {
  appearance: base-select;
  background-color: var(--components-popover-background);
  border-color: var(--components-popover-border);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--popover-radius);
  padding: var(--popover-padding-y) var(--popover-padding-x);
  margin-top: var(--spacing-2);
  box-shadow: var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity);
}
.date-controls select::picker-icon {
  display: none;
}
.date-controls select option {
  display: flex;
  gap: var(--list-select-gap-y);
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  background-color: var(--components-list-select-option-background-default);
  padding: var(--list-select-option-padding);
  font-weight: var(--menu-contextual-item-font-weight);
  font-size: var(--list-select-font-size);
  line-height: var(--list-select-line-height);
  color: var(--components-list-select-option-content-default);
  border-radius: var(--list-select-option-radius);
  transition: background-color 150ms ease-out, color 150ms ease-out;
  cursor: pointer;
}
.date-controls select option:not(:first-of-type) {
  margin-top: var(--list-select-gap-y);
}
.date-controls select option:hover, .date-controls select option:focus, .date-controls select option:focus-within {
  background-color: var(--components-list-select-option-background-hover);
  color: var(--components-list-select-option-content-hover);
}
.date-controls select option:checked {
  background-color: var(--components-list-select-option-background-active);
  color: var(--components-list-select-option-content-active);
}
.date-controls select option:checked::after {
  order: 1;
  margin-left: auto;
  content: "";
  display: inline-block;
  width: var(--spacing-5);
  height: var(--spacing-5);
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.date-controls select option::checkmark {
  display: none;
}
.date-controls select option:disabled, .date-controls select option:checked:disabled {
  color: var(--components-list-select-option-content-disabled);
  background-color: var(--components-list-select-option-background-default);
}
.date-controls select option {
  padding: calc(var(--list-dropdown-item-padding-y) * 0.5) calc(var(--list-dropdown-item-padding-x) * 0.8);
}
.date-controls .month-select,
.date-controls .year-input {
  background: transparent !important;
}

.calendar-wrapper:nth-child(n+2) .datepicker-container {
  margin-left: 42px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--calendar-weeks-calendar-gap-x);
  position: relative;
}
.calendar-grid.slide-left {
  animation: slideLeft 0.3s ease-out;
}
.calendar-grid.slide-right {
  animation: slideRight 0.3s ease-out;
}

.week-numbers {
  display: grid;
  grid-template-rows: var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));
  background: var(--components-calendar-weeks-background);
  color: var(--components-calendar-weeks-text);
  border-radius: var(--calendar-weeks-radius);
  width: var(--calendar-weeks-size);
  row-gap: var(--calendar-grid-gap-y);
}
.week-numbers .clickable {
  cursor: pointer;
}
.week-numbers .clickable:hover {
  background-color: var(--components-calendar-weeks-background-hover);
  color: var(--components-calendar-weeks-text-hover);
  border-radius: var(--calendar-radius);
}

.week-header,
.week-number {
  display: grid;
  place-items: center;
  font-size: var(--calendar-cell-font-size);
}

.week-header {
  font-weight: 700;
  color: var(--components-calendar-weeks-text);
}

.week-number {
  color: var(--components-calendar-cell-text);
}

.days-container {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: var(--calendar-grid-gap-y);
}

.days-header {
  display: grid;
  grid-template-columns: repeat(7, var(--calendar-cell-size));
  height: var(--calendar-cell-size);
}

.day-header {
  display: grid;
  place-items: center;
  font-size: var(--calendar-cell-font-size);
  color: var(--components-calendar-cell-text);
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, var(--calendar-cell-size));
  grid-template-rows: repeat(6, var(--calendar-cell-size));
  animation: fadeIn 0.2s ease-in;
  row-gap: var(--calendar-grid-gap-y);
  z-index: 0;
}

.day {
  display: grid;
  place-items: center;
  width: var(--calendar-cell-size);
  height: var(--calendar-cell-size);
  font-size: var(--calendar-cell-font-size);
  border-radius: var(--calendar-cell-radius);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.2s ease;
  text-align: center;
  animation: scaleIn 0.2s ease-out;
}
.day:hover:not(.disabled, .empty, .selected) {
  background: var(--components-calendar-cell-background-hover);
  color: var(--components-calendar-cell-text-hover);
}
.day.selected, .day.selected:hover, .day.is-today.selected, .day.is-today.selected:hover {
  background: var(--components-calendar-cell-background-selected);
  color: var(--components-calendar-cell-text-selected) !important;
}
.day.disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
.day.is-empty {
  pointer-events: none;
  background-color: transparent;
  border-color: transparent;
}
.day.day-blank {
  pointer-events: none;
  background-color: transparent;
  border-color: transparent;
}
.day.outside-month {
  color: var(--components-calendar-cell-text);
  opacity: var(--opacity-disabled);
}
.day.outside-month.selected {
  opacity: 1 !important;
  color: var(--components-calendar-cell-text-selected);
}
.day.outside-month.in-range {
  opacity: 0.5 !important;
  background-color: var(--components-calendar-cell-background-in-range);
  color: var(--components-calendar-cell-text-in-range);
}
.day.outside-month.in-range:hover {
  opacity: 0.7 !important;
  background-color: var(--components-calendar-cell-background-in-range);
}
.day.in-range {
  background: var(--components-calendar-cell-background-in-range);
  color: var(--components-calendar-cell-text-in-range);
  border-radius: 0;
  position: relative;
}
.day.range-start, .day.range-start:focus, .day.range-start:hover, .day.range-end, .day.range-end:focus, .day.range-end:hover {
  background-color: var(--components-calendar-cell-background-selected) !important;
  color: var(--components-calendar-cell-text-selected) !important;
}
.day.range-start, .day.range-end, .day.range-start.is-today, .day.range-end.is-today {
  background: var(--components-calendar-cell-background-selected);
  color: var(--components-calendar-cell-text-selected);
  position: relative;
  border-radius: var(--radius-rounded-full);
}
.day.range-start:hover, .day.range-end:hover, .day.range-start.is-today:hover, .day.range-end.is-today:hover {
  color: var(--components-calendar-cell-text-today);
}
.day.range-start:before, .day.range-end:before, .day.range-start.is-today:before, .day.range-end.is-today:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  background-color: var(--components-calendar-cell-background-in-range);
  border-radius: var(--radius-rounded-full);
  width: auto;
  height: auto;
}
.day.range-start:has(~ .range-end):before, .day.range-start:has(+ .in-range):before {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.day.range-end:before {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.day.outside-month.range-start, .day.outside-month.range-end {
  opacity: 1 !important;
  background: var(--components-calendar-cell-background-selected) !important;
  color: var(--components-calendar-cell-text-selected);
}
.day.is-today {
  font-weight: 700;
  position: relative;
  color: var(--components-calendar-cell-text-today);
}
.day.is-today.range-start, .day.is-today.range-end {
  color: var(--components-calendar-cell-text-selected);
}
.day.is-today.range-start:hover, .day.is-today.range-end:hover {
  color: var(--components-calendar-cell-text-today);
}
.day.is-today::after {
  content: "";
  position: absolute;
  bottom: var(--spacing-1);
  left: 50%;
  transform: translateX(-50%);
  width: var(--calendar-cell-dot-size);
  height: var(--calendar-cell-dot-size);
  background-color: currentColor;
  border-radius: 50%;
}
.day.is-today.selected::after {
  color: var(--components-calendar-cell-text-selected);
}
.day.is-today.selected::after::after {
  background-color: var(--components-calendar-cell-dot-selected);
}
.day.hover-range {
  background-color: var(--components-calendar-cell-background-hover);
}
.day.hover-blocked {
  background-color: var(--components-calendar-cell-background-hover);
}
.day.disabled.hover-blocked {
  background-color: transparent;
}

.calendar-footer {
  display: flex;
  gap: var(--spacing-1);
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
}

.footer-placement-left {
  justify-content: flex-start;
}

.footer-placement-right {
  justify-content: flex-end;
}

.footer-placement-center {
  justify-content: center;
}

.datepicker-controls {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--components-calendar-border);
  padding: var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);
  gap: var(--calendar-grid-gap-y);
  margin-top: var(--calendar-controls-margin-top);
}

.datepicker-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-1);
  width: 100%;
}
.datepicker-actions slot-fb {
  display: contents !important;
}
.datepicker-actions .actions-container {
  display: flex;
  gap: var(--spacing-1);
}

.calendar-footer + .datepicker-actions {
  margin-top: 0;
}

.shortcuts-placement-left,
.shortcuts-placement-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-top: var(--spacing-4);
}

.shortcuts-placement-left {
  align-items: flex-end;
}

.shortcuts-placement-right {
  align-items: flex-start;
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}