daisyui/components/calendar.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.6.3 - MIT License */ @layer utilities{.cally{@layer daisyui.l1.l2.l3{font-size:.7rem;&::part(container){user-select:none;padding:.5rem 1rem}& ::part(th){block-size:auto;font-weight:400}&::part(header){direction:ltr}& ::part(head){opacity:.5;font-size:.7rem}&::part(button){border-radius:var(--radius-field);background:0 0;border:none;padding:.5rem}&::part(button):hover{background:var(--color-base-200)}& ::part(day){border-radius:var(--radius-field);font-size:.7rem}& ::part(day):hover{&:not(selected,today){background:var(--color-base-200)}}& ::part(button day today){background:var(--color-primary);color:var(--color-primary-content)}& ::part(selected){color:var(--color-base-100);background:var(--color-base-content);border-radius:var(--radius-field)}& ::part(range-inner){border-radius:0}& ::part(range-start){border-start-end-radius:0;border-end-end-radius:0}& ::part(range-end){border-start-start-radius:0;border-end-start-radius:0}& ::part(range-start range-end){border-radius:var(--radius-field)}& calendar-month{width:100%}}}.react-day-picker{@layer daisyui.l1.l2.l3{user-select:none;background-color:var(--color-base-100);border-radius:var(--radius-box);border:var(--border) solid var(--color-base-200);font-size:.75rem;display:inline-block;position:relative;overflow:clip;&[dir=rtl]{& .rdp-nav{& .rdp-chevron{transform-origin:50%;transform:rotate(180deg)}}}& *{box-sizing:border-box}& .rdp-day{text-align:center;width:2.25rem;height:2.25rem}& .rdp-day_button{cursor:pointer;font:inherit;color:inherit;border-radius:var(--radius-field);background:0 0;border:2px solid #0000;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;margin:0;padding:0;display:flex;&:disabled{cursor:revert}&:hover{background-color:var(--color-base-200)}&:disabled:hover,&[aria-disabled=true]:hover{cursor:not-allowed;background-color:#0000}}& .rdp-caption_label{z-index:1;white-space:nowrap;border:0;align-items:center;display:inline-flex;position:relative}& .rdp-button_next{border-radius:var(--radius-field);&:hover{background-color:var(--color-base-200)}}& .rdp-button_previous{border-radius:var(--radius-field);&:hover{background-color:var(--color-base-200)}}& .rdp-button_next,& .rdp-button_previous{cursor:pointer;font:inherit;color:inherit;appearance:none;background:0 0;border:none;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;margin:0;padding:0;display:inline-flex;position:relative;&:disabled,&[aria-disabled=true]{cursor:revert;opacity:.5}&:disabled:hover,&[aria-disabled=true]:hover{background-color:#0000}}& .rdp-chevron{fill:var(--color-base-content);width:1rem;height:1rem;display:inline-block}& .rdp-dropdowns{align-items:center;gap:.5rem;display:inline-flex;position:relative}& .rdp-dropdown{z-index:2;opacity:0;appearance:none;cursor:inherit;line-height:inherit;border:none;width:100%;margin:0;padding:0;position:absolute;inset-block:0;inset-inline-start:0;&:focus-visible{&~.rdp-caption_label{outline:5px auto highlight;outline:5px auto -webkit-focus-ring-color}}}& .rdp-dropdown_root{align-items:center;display:inline-flex;position:relative;&[data-disabled=true]{& .rdp-chevron{opacity:.5}}}& .rdp-month_caption{height:2.75rem;font-size:.75rem;font-weight:inherit;place-content:center;display:flex}& .rdp-months{flex-wrap:wrap;gap:2rem;max-width:fit-content;padding:.5rem;display:flex;position:relative}& .rdp-month_grid{border-collapse:collapse}& .rdp-nav{inset-block-start:0;inset-inline-end:0;justify-content:space-between;align-items:center;width:100%;height:2.75rem;padding-inline:.5rem;display:flex;position:absolute;top:.25rem}& .rdp-weekday{opacity:.6;text-align:center;padding:.5rem 0;font-size:smaller;font-weight:500}& .rdp-week_number{opacity:.6;text-align:center;border:none;border-radius:100%;width:2.25rem;height:2.25rem;font-size:small;font-weight:400}& .rdp-today:not(.rdp-outside){& .rdp-day_button{background:var(--color-primary);color:var(--color-primary-content)}}& .rdp-selected{font-weight:inherit;font-size:.75rem;& .rdp-day_button{color:var(--color-base-100);background-color:var(--color-base-content);border-radius:var(--radius-field);border:none;&:hover{background-color:var(--color-base-content)}}}& .rdp-outside{opacity:.75}& .rdp-disabled{opacity:.5}& .rdp-hidden{visibility:hidden;color:var(--color-base-content)}& .rdp-range_start{& .rdp-day_button{border-radius:var(--radius-field) 0 0 var(--radius-field)}}& .rdp-range_start .rdp-day_button{background-color:var(--color-base-content);color:var(--color-base-100)}& .rdp-range_middle{background-color:var(--color-base-200)}& .rdp-range_middle .rdp-day_button{border:unset;border-radius:unset;color:inherit;background-color:#0000;&:hover{background-color:#0000}}& .rdp-range_end{color:var(--color-base-content);& .rdp-day_button{border-radius:0 var(--radius-field) var(--radius-field) 0}}& .rdp-range_end .rdp-day_button{background-color:var(--color-base-content);color:var(--color-base-100)}& .rdp-range_start.rdp-range_end{background:revert}& .rdp-focusable{cursor:pointer}& .rdp-footer{border-top:var(--border) solid var(--color-base-200);padding:.5rem}}}.pika-single{@layer daisyui.l1.l2.l3{&:is(div){user-select:none;z-index:999;color:var(--color-base-content);background-color:var(--color-base-100);border-radius:var(--radius-box);border:var(--border) solid var(--color-base-200);padding:.5rem;font-size:.75rem;display:inline-block;position:relative;&:before,&:after{content:"";display:table}&:after{clear:both}&.is-hidden{display:none}&.is-bound{position:absolute}& .pika-lendar{float:left}& .pika-title{text-align:center;position:relative}& .pika-label{z-index:999;background-color:var(--color-base-100);margin:0;padding:5px 3px;display:inline-block;position:relative;overflow:hidden}& .pika-title{& select{cursor:pointer;z-index:999;opacity:0;margin:0;position:absolute;top:5px;left:0}}& .pika-prev,& .pika-next{cursor:pointer;color:#0000;border-radius:var(--radius-field);border:0;outline:none;width:2.25rem;height:2.25rem;font-size:1.2em;display:block;position:absolute;top:0;&:hover{background-color:var(--color-base-200)}&.is-disabled{cursor:default;opacity:.2}&:before{width:2.25rem;height:2.25rem;color:var(--color-base-content);line-height:2.25;display:inline-block}}& .pika-prev{left:0;&:before{--tw-content:"‹";content:var(--tw-content)}}& .pika-next{right:0;&:before{--tw-content:"›";content:var(--tw-content)}}& .pika-select{display:inline-block}& .pika-table{border-collapse:collapse;border-spacing:0;border:0;width:100%}& .pika-table{& th,& td{padding:0}& th{opacity:.6;text-align:center;width:2.25rem;height:2.25rem}}& .pika-button{cursor:pointer;text-align:right;text-align:center;border:0;outline:none;width:2.25rem;height:2.25rem;margin:0;padding:5px;display:block}& .pika-week{color:var(--color-base-content)}& .is-today{& .pika-button{background:var(--color-primary);color:var(--color-primary-content)}}& .is-selected,& .has-event{& .pika-button{&,&:hover{color:var(--color-base-100);background-color:var(--color-base-content);border-radius:var(--radius-field)}}}& .has-event{& .pika-button{background:var(--color-primary)}}& .is-disabled,& .is-inrange{& .pika-button{background:var(--color-base-200)}}& .is-startrange{& .pika-button{color:var(--color-base-100);background:var(--color-base-content);border-radius:var(--radius-field)}}& .is-endrange{& .pika-button{color:var(--color-base-100);background:var(--color-base-content);border-radius:var(--radius-field)}}& .is-disabled{& .pika-button{pointer-events:none;cursor:default;color:var(--color-base-content);opacity:.3}}& .is-outside-current-month{& .pika-button{color:var(--color-base-content);opacity:.3}}& .is-selection-disabled{pointer-events:none;cursor:default}& .pika-button:hover,& .pika-row.pick-whole-week:hover .pika-button{color:var(--color-base-content);background-color:var(--color-base-200);border-radius:var(--radius-field)}& .pika-table abbr{font-weight:400;text-decoration:none}}}}.vc{@layer daisyui.l1.l2.l3{box-sizing:border-box;border-radius:var(--radius-box);border:var(--border) solid var(--color-base-200);background-color:var(--color-base-100);min-width:286px;color:var(--color-base-content);opacity:1;user-select:none;flex-direction:column;padding:1rem;transition-property:opacity;transition-duration:.2s;display:inline-flex;position:relative;&:focus-visible,& button:focus-visible,& [tabindex="0"]:focus-visible{border-radius:var(--radius-field);outline:1px solid var(--color-primary);outline-offset:-1px}&[data-vc-calendar-hidden]{pointer-events:none;opacity:0;& *{pointer-events:none!important}}&[data-vc-input]{box-shadow:0 9px 20px color-mix(in oklab, var(--color-base-content) 10%, transparent);position:absolute;&[data-vc-position=bottom]{margin-top:.25rem}&[data-vc-position=top]{margin-top:-.25rem}}& [data-vc=controls]{pointer-events:none;z-index:20;box-sizing:content-box;justify-content:space-between;align-items:center;padding:1.25rem 1rem 0;display:flex;position:absolute;inset-block-start:0;inset-inline:0}& [data-vc-arrow],& .vc-arrow{pointer-events:auto;cursor:pointer;border-radius:var(--radius-field);width:1.5rem;height:1.5rem;color:var(--color-base-content);background-color:#0000;border:0;display:block;position:relative;&:hover{background-color:var(--color-base-200)}&:hover:before{opacity:.6}&:before{content:"";background-position:50%;background-repeat:no-repeat;border:2px solid;border-width:0 2px 2px 0;width:.5rem;height:.5rem;position:absolute;inset-block-start:50%;inset-inline-start:50%}&[data-vc-arrow=prev]:before{transform:translate(-35%,-50%)rotate(135deg)}&[data-vc-arrow=next]:before{transform:translate(-65%,-50%)rotate(-45deg)}}& [data-vc=grid]{flex-wrap:wrap;flex-grow:1;gap:1.75rem;display:flex;&[data-vc-grid=hidden]{& [data-vc=column]{pointer-events:none;opacity:.3}& [data-vc=column][data-vc-column=month],& [data-vc=column][data-vc-column=year]{pointer-events:auto;opacity:1}}}& [data-vc=column]{flex-direction:column;flex-grow:1;min-width:240px;display:flex}& [data-vc=header]{align-items:center;margin-bottom:.75rem;display:flex;position:relative}& [data-vc-header=content],& .vc-header__content{color:var(--color-base-content)}& [data-vc-header=content]{white-space:pre-wrap;flex-grow:1;grid-auto-columns:max-content;grid-auto-flow:column;justify-content:center;align-items:center;padding-inline:1rem;display:grid}& [data-vc=month],& [data-vc=year],& .vc-month,& .vc-year{color:var(--color-base-content);&:hover{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}&:disabled{color:color-mix(in oklab, var(--color-base-content) 30%, transparent)}}& [data-vc=month],& [data-vc=year]{cursor:pointer;border-radius:var(--radius-field);background-color:#0000;border:0;padding:.25rem;font-size:.875rem;font-weight:600;&:hover{background-color:var(--color-base-200)}&:disabled{pointer-events:none;opacity:.4}}& [data-vc=wrapper],& [data-vc=content]{flex-grow:1;display:flex}& [data-vc=content]{flex-direction:column}& [data-vc=months],& [data-vc=years]{flex-grow:1;align-items:center;gap:1rem .25rem;display:grid}& [data-vc=months]{grid-template-columns:repeat(4,minmax(0,1fr))}& [data-vc=years]{grid-template-columns:repeat(5,minmax(0,1fr))}& [data-vc-months-month],& [data-vc-years-year],& .vc-months__month,& .vc-years__year{background-color:var(--color-base-100);color:color-mix(in oklab, var(--color-base-content) 70%, transparent);&:hover{background-color:var(--color-base-200);color:var(--color-base-content)}&:disabled{color:color-mix(in oklab, var(--color-base-content) 30%, transparent);opacity:.8;&:hover{color:color-mix(in oklab, var(--color-base-content) 30%, transparent)}}&[data-vc-months-month-selected],&[data-vc-years-year-selected]{background-color:var(--color-primary);color:var(--color-primary-content);&:hover{background-color:var(--color-primary);color:var(--color-primary-content)}}}& [data-vc-months-month],& [data-vc-years-year]{cursor:pointer;overflow-wrap:anywhere;border-radius:var(--radius-field);text-align:center;border:0;justify-content:center;align-items:center;height:2.5rem;padding:.25rem;font-size:.75rem;font-weight:600;display:flex;&:disabled{pointer-events:none;opacity:.4}}& [data-vc-week=numbers]{flex-direction:column;display:flex}& [data-vc-week-numbers=title],& .vc-week-numbers__title{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}& [data-vc-week-numbers=title]{justify-content:center;align-items:center;margin-bottom:.5rem;font-size:.75rem;font-weight:700;display:flex}& [data-vc-week-numbers=content]{grid-auto-flow:row;place-items:center;row-gap:.25rem;display:grid}& [data-vc-week-number],& .vc-week-number{color:color-mix(in oklab, var(--color-base-content) 60%, transparent);&:hover{color:color-mix(in oklab, var(--color-base-content) 80%, transparent)}}& [data-vc-week-number]{cursor:pointer;background-color:#0000;border:0;justify-content:center;align-items:center;width:100%;min-width:1.875rem;min-height:1.875rem;margin:0;padding:0;font-size:.75rem;font-weight:600;display:flex}& [data-vc=week]{grid-template-columns:repeat(7,1fr);justify-items:center;margin-bottom:.5rem;display:grid}& [data-vc-week-day],& .vc-week__day{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}& [data-vc-week-day]{background-color:#0000;border:0;justify-content:center;align-items:center;width:100%;min-width:1.875rem;margin:0;padding:0;font-size:.75rem;font-weight:400;display:flex}& button[data-vc-week-day],& button.vc-week__day{cursor:pointer;&:hover{color:var(--color-base-content)}}& [data-vc=dates]{pointer-events:none;flex-grow:1;grid-template-rows:auto;grid-template-columns:1fr;place-items:center;display:grid;&[data-vc-dates-disabled] [data-vc-date-btn]{cursor:default}}&[data-vc-type=multiple] [data-vc=dates]{flex-grow:0}& [data-vc-dates=row]{grid-template-columns:repeat(7,1fr);place-items:center;width:100%;display:grid}& [data-vc-date],& .vc-date{&[data-vc-date-month=prev],&[data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}&[data-vc-date-disabled]{pointer-events:none;& [data-vc-date-btn],& .vc-date__btn{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 30%, transparent);opacity:.8}}&:not(:has([data-vc-date-btn])){pointer-events:none}&[data-vc-date-hover]{& [data-vc-date-btn]{border-radius:0}& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-200)}&[data-vc-date-hover=first],&[data-vc-date-hover=last]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-300);&:hover{background-color:var(--color-base-300)}}}&[data-vc-date-hover=first] [data-vc-date-btn]{border-start-start-radius:var(--radius-field);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-field)}&[data-vc-date-hover=last] [data-vc-date-btn]{border-start-start-radius:0;border-start-end-radius:var(--radius-field);border-end-end-radius:var(--radius-field);border-end-start-radius:0}&[data-vc-date-hover=first-and-last] [data-vc-date-btn]{border-radius:var(--radius-field)}&[data-vc-date-selected]{&[data-vc-date-hover=first] [data-vc-date-btn]{border-start-start-radius:var(--radius-field);border-end-start-radius:var(--radius-field)}&[data-vc-date-hover=last] [data-vc-date-btn]{border-start-end-radius:var(--radius-field);border-end-end-radius:var(--radius-field)}}&:has(+[data-vc-date-disabled]) [data-vc-date-btn]{border-start-end-radius:var(--radius-field);border-end-end-radius:var(--radius-field)}}&[data-vc-date-selected]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-content);color:var(--color-base-100);&:hover{background-color:var(--color-base-content);color:var(--color-base-100)}}&:has(+[data-vc-date-disabled]) [data-vc-date-btn]{border-start-end-radius:var(--radius-field);border-end-end-radius:var(--radius-field)}&[data-vc-date-selected=first] [data-vc-date-btn]{border-start-start-radius:var(--radius-field);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-field)}&[data-vc-date-selected=last] [data-vc-date-btn]{border-start-start-radius:0;border-start-end-radius:var(--radius-field);border-end-end-radius:var(--radius-field);border-end-start-radius:0}&[data-vc-date-selected=first-and-last] [data-vc-date-btn]{border-start-start-radius:var(--radius-field);border-start-end-radius:var(--radius-field);border-end-end-radius:var(--radius-field);border-end-start-radius:var(--radius-field)}&[data-vc-date-selected=middle]{& [data-vc-date-btn]{border-radius:0}}&[data-vc-date-month=prev],&[data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-300);color:color-mix(in oklab, var(--color-base-content) 60%, transparent);&:hover{background-color:var(--color-base-300);color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}}&[data-vc-date-selected=middle][data-vc-date-month=prev],&[data-vc-date-selected=middle][data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 60%, transparent);&:hover{background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}}}&[data-vc-date-today]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-primary);color:var(--color-primary-content);font-weight:700;&:hover{color:var(--color-primary-content)}}&[data-vc-date-month=prev],&[data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}}&[data-vc-date-holiday]{& [data-vc-date-btn],& .vc-date__btn{color:var(--color-error);&:hover{background-color:color-mix(in oklab, var(--color-error) 10%, transparent)}}&[data-vc-date-hover]{& [data-vc-date-btn],& .vc-date__btn{background-color:color-mix(in oklab, var(--color-error) 10%, transparent)}&[data-vc-date-hover=first],&[data-vc-date-hover=last]{& [data-vc-date-btn],& .vc-date__btn{background-color:color-mix(in oklab, var(--color-error) 20%, transparent);&:hover{background-color:color-mix(in oklab, var(--color-error) 20%, transparent)}}}}&[data-vc-date-disabled]{& [data-vc-date-btn],& .vc-date__btn{color:color-mix(in oklab, var(--color-base-content) 30%, transparent);opacity:.8}}&[data-vc-date-today]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-error);color:var(--color-error-content)}&[data-vc-date-disabled]{& [data-vc-date-btn],& .vc-date__btn{color:color-mix(in oklab, var(--color-base-content) 30%, transparent)}}&[data-vc-date-month=prev],&[data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}}&[data-vc-date-month=prev],&[data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-100);color:color-mix(in oklab, var(--color-base-content) 40%, transparent);&:hover{background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}}&[data-vc-date-hover][data-vc-date-month=prev],&[data-vc-date-hover][data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-200)}}&[data-vc-date-disabled][data-vc-date-month=prev],&[data-vc-date-disabled][data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{color:color-mix(in oklab, var(--color-base-content) 30%, transparent);opacity:.8}}&[data-vc-date-selected]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-error);color:var(--color-error-content);&:hover{background-color:var(--color-error);color:var(--color-error-content)}}&[data-vc-date-selected=middle]{& [data-vc-date-btn],& .vc-date__btn{background-color:color-mix(in oklab, var(--color-error) 75%, transparent);color:var(--color-error-content);&:hover{background-color:color-mix(in oklab, var(--color-error) 75%, transparent);color:var(--color-error-content)}}}&[data-vc-date-month=prev],&[data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-300);color:color-mix(in oklab, var(--color-base-content) 60%, transparent);&:hover{background-color:var(--color-base-300);color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}}&[data-vc-date-selected=middle][data-vc-date-month=prev],&[data-vc-date-selected=middle][data-vc-date-month=next]{& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 60%, transparent);&:hover{background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}}}}}& [data-vc-date]{pointer-events:auto;justify-content:center;align-items:center;width:100%;padding-block:.125rem;display:flex;position:relative;&[data-vc-date-disabled]+[data-vc-date-selected] [data-vc-date-btn],&[data-vc-date-disabled]+[data-vc-date-hover] [data-vc-date-btn]{border-start-start-radius:var(--radius-field);border-end-start-radius:var(--radius-field)}}& [data-vc-date-btn],& .vc-date__btn{background-color:var(--color-base-100);color:var(--color-base-content);&:hover{background-color:var(--color-base-200)}}& [data-vc-date-btn]{cursor:pointer;border-radius:var(--radius-field);border:0;justify-content:center;align-items:center;width:100%;min-width:1.875rem;height:100%;min-height:1.875rem;padding:0;font-size:.75rem;font-weight:400;transition-property:color,background-color,border-color,opacity,box-shadow,transform;transition-duration:75ms;display:flex}& [data-vc-date-btn]:focus-visible+[data-vc-date-popup],& [data-vc-date-btn]:hover+[data-vc-date-popup],& [data-vc-date-popup]:focus-visible,& [data-vc-date-popup]:hover{pointer-events:auto;opacity:1}& [data-vc-date-popup],& .vc-date__popup{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:0 3px 15px color-mix(in oklab, var(--color-base-content) 20%, transparent)}& [data-vc-date-popup]{pointer-events:none;z-index:20;border-radius:var(--radius-field);opacity:0;min-width:5rem;max-width:9rem;padding:.25rem .5rem;font-size:.75rem;font-weight:400;transition-property:opacity;transition-duration:75ms;position:absolute;transform:translate(-50%);&:hover{pointer-events:auto;opacity:1}}& [data-vc-date-range-tooltip],& .vc-date-range-tooltip{background-color:var(--color-base-200);color:color-mix(in oklab, var(--color-base-content) 70%, transparent);box-shadow:0 1px 4px color-mix(in oklab, var(--color-base-content) 20%, transparent)}& [data-vc-date-range-tooltip]{pointer-events:none;z-index:30;border-radius:var(--radius-field);max-width:9rem;padding:.25rem .5rem;font-size:.75rem;font-weight:400;position:absolute;transform:translate(-50%,-100%);&[data-vc-date-range-tooltip=hidden]{opacity:0}&[data-vc-date-range-tooltip=visible]{opacity:1}}& [data-vc=time],& .vc-time{border-color:var(--color-base-200)}& [data-vc=time]{border-style:solid;border-width:var(--border) 0 0;grid-template-columns:auto 1fr;gap:.75rem;margin-top:.75rem;padding-top:.75rem;display:grid}& [data-vc-time=content]{grid-auto-flow:column;align-items:center;display:grid}& [data-vc-time-input=hour],& [data-vc-time-input=minute],& .vc-time__hour,& .vc-time__minute{&:after{color:var(--color-base-content)}}& [data-vc-time-input=hour]{width:1.75rem;margin-right:.35rem;position:relative;&:after{content:":";margin-top:calc(1px - 50%);display:block;position:absolute;inset-block-start:50%;inset-inline-end:-5px}}& [data-vc-time-input=minute]{width:1.75rem}& [data-vc-time-input=hour] input,& [data-vc-time-input=minute] input,& .vc-time__hour input,& .vc-time__minute input{background-color:var(--color-base-100);color:var(--color-base-content);&:hover,&[data-vc-input-focus]{background-color:var(--color-base-200)}&:focus-visible{outline-color:var(--color-primary)}&[data-vc-input-focus]{background-color:var(--color-base-200)}}& [data-vc-time-input=hour] input,& [data-vc-time-input=minute] input{box-sizing:border-box;border-radius:var(--radius-field);text-align:center;border:0;width:100%;margin:0;padding:.125rem;font-size:1.125rem;font-weight:600;line-height:1.125rem;display:block;position:relative;&:disabled{cursor:default;&:hover{background-color:#0000}}&:focus-visible{outline:1px solid var(--color-primary)}}& [data-vc-time=keeping],& .vc-time__keeping{color:color-mix(in oklab, var(--color-base-content) 70%, transparent);&:hover{background-color:var(--color-base-200);color:var(--color-base-content)}&:focus-visible{outline-color:var(--color-primary)}}& [data-vc-time=keeping]{cursor:pointer;border-radius:var(--radius-field);background-color:#0000;border:0;width:22px;margin-top:.25rem;margin-left:1px;padding:0;font-size:.69rem;&:disabled{cursor:default;&:hover{background-color:#0000}}&:focus-visible{outline:1px solid var(--color-primary)}}& [data-vc-time=ranges]{grid-auto-flow:row;display:grid}& [data-vc-time-range],& .vc-time__range{& input{background-color:var(--color-base-100);&:focus-visible{&::-webkit-slider-thumb,&::-moz-range-thumb{border-color:var(--color-primary)}}&::-webkit-slider-thumb,&::-moz-range-thumb{border-color:var(--color-base-300);background-color:var(--color-base-100)}&::-webkit-slider-runnable-track,&::-moz-range-track{background-color:var(--color-base-300)}}&:hover input{&::-webkit-slider-thumb,&::-moz-range-thumb{border-color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}&:before,&:after{background-color:var(--color-base-300)}}& [data-vc-time-range]{z-index:10;font-size:0;position:relative;&:before{inset-inline-start:0}&:after{inset-inline-end:0}&:before,&:after{content:"";pointer-events:none;z-index:10;width:1px;height:.5rem;position:absolute;inset-block-start:50%;transform:translateY(-50%)}& input{cursor:pointer;appearance:none;outline:0;width:100%;height:1.25rem;margin:0;position:relative;&::-webkit-slider-thumb{appearance:none;margin-top:-.5rem}&::-webkit-slider-thumb,&::-moz-range-thumb{z-index:20;box-sizing:border-box;cursor:pointer;border:var(--border) solid var(--color-base-300);border-radius:var(--radius-field);width:.75rem;height:1rem;box-shadow:none;position:relative}&::-webkit-slider-runnable-track,&::-moz-range-track{box-sizing:border-box;cursor:pointer;width:100%;height:1px;box-shadow:none;margin-top:1px}}}}}}