@lunalytics/ui
Version:
React based component library created to be used in Lunalytics
2 lines (1 loc) • 37 kB
CSS
.luna-accordion-list{display:flex;flex-direction:column;gap:.375rem}.luna-accordion-list-item,.luna-accordion-list-item-dark{background-color:var(--lunaui-accent-800);border:.125rem solid var(--lunaui-accent-700);padding:.375rem;border-radius:var(--lunaui-radius-md)}.luna-accordion-list-item-dark{background-color:var(--lunaui-accent-900)}.luna-accordion-list-item header{display:flex;justify-content:space-between;font-weight:700;cursor:pointer;transition:all .3s ease-in-out;align-items:center;gap:.75rem}.luna-accordion-list-item header:hover .luna-accordion-list-item-title{color:var(--lunaui-primary-500)}.luna-accordion-list-item-title{display:flex;justify-content:space-between;align-items:center;transition:all .3s ease-in-out}.luna-accordion-list-item-subtitle{font-weight:400;color:var(--lunaui-text-light-font)}.luna-accordion-list-item-tag{background-color:var(--lunaui-accent-700);padding:.1875rem .375rem;border-radius:var(--lunaui-radius-sm);font-size:.5625rem;color:var(--lunaui-text-color);border:.125rem solid var(--lunaui-accent-600)}.luna-accordion-list-item-tag.primary,.luna-accordion-list-item-tag.blue{background-color:var(--lunaui-blue-700);border-color:var(--lunaui-blue-600)}.luna-accordion-list-item-tag.green{background-color:var(--lunaui-green-700);border-color:var(--lunaui-green-600)}.luna-accordion-list-item-tag.red{background-color:var(--lunaui-red-700);border-color:var(--lunaui-red-600)}.luna-accordion-list-item-tag.yellow{background-color:var(--lunaui-yellow-700);border-color:var(--lunaui-yellow-600)}.luna-accordion-list-item-tag.orange{background-color:var(--lunaui-orange-700);border-color:var(--lunaui-orange-600)}.luna-accordion-list-item-tag.purple{background-color:var(--lunaui-purple-700);border-color:var(--lunaui-purple-600)}.luna-accordion-list-item-tag.pink{background-color:var(--lunaui-pink-700);border-color:var(--lunaui-pink-600)}.luna-accordion-list-item-tag.gray{background-color:var(--lunaui-gray-700);border-color:var(--lunaui-gray-600)}.luna-accordion-list-item-text{padding:.375rem 0;font-weight:400}.luna-alert{display:flex;border-left:.25rem solid var(--lunaui-primary-700);border-radius:.375rem;padding:.5rem 1rem;gap:.625rem;background-color:var(--lunaui-accent-800);--alert-color: var(--lunaui-primary-700);border-left-color:var(--alert-color)}.luna-alert.primary{--alert-color: var(--lunaui-primary-700)}.luna-alert.blue{--alert-color: var(--lunaui-blue-700)}.luna-alert.cyan{--alert-color: var(--lunaui-cyan-700)}.luna-alert.gray{--alert-color: var(--lunaui-gray-400)}.luna-alert.green{--alert-color: var(--lunaui-green-700)}.luna-alert.pink{--alert-color: var(--lunaui-pink-700)}.luna-alert.purple{--alert-color: var(--lunaui-purple-700)}.luna-alert.red{--alert-color: var(--lunaui-red-700)}.luna-alert.yellow{--alert-color: var(--lunaui-yellow-700)}.luna-alert-icon{display:flex;align-items:center;justify-content:center;color:var(--alert-color);gap:.3125rem}.luna-alert-icon svg{width:1.5625rem;height:1.5625rem}.luna-alert-title{display:flex;align-items:center;color:var(--alert-color);gap:.3125rem}.luna-alert.solid{color:var(--lunaui-text-color);background-color:var(--alert-color)}.luna-alert.solid .alert-container-title,.luna-alert.solid .alert-container-icon{color:var(--lunaui-text-color)}.luna-alert.light{color:var(--alert-color);background-color:color-mix(in srgb,var(--alert-color),transparent 80%);border-top:.0625rem solid var(--alert-color);border-right:.0625rem solid var(--alert-color);border-bottom:.0625rem solid var(--alert-color)}.luna-alert.light .alert-container-title,.luna-alert.light .alert-container-icon{color:var(--alert-color)}.luna-alert.flat{color:var(--alert-color);background-color:transparent;border-top:.0625rem solid var(--alert-color);border-right:.0625rem solid var(--alert-color);border-bottom:.0625rem solid var(--alert-color)}.luna-alert.flat .alert-container-title,.luna-alert.flat .alert-container-icon{color:var(--alert-color)}.luna-alert.shadow{color:var(--lunaui-text-color);background-color:var(--alert-color);box-shadow:0 2px 8px var(--alert-color)}.luna-alert.shadow .alert-container-title,.luna-alert.shadow .alert-container-icon{color:var(--lunaui-text-color)}.luna-avatar-container{display:flex;align-items:center;justify-content:center;color:var(--lunaui-text-color)}.luna-avatar-container:hover{color:var(--lunaui-primary-500);cursor:pointer}.luna-avatar-container .luna-avatar-default:hover{color:var(--lunaui-text-color)}.luna-avatar{width:2.5rem;height:2.5rem;border-radius:var(--lunaui-radius-pill);display:flex;align-items:center;justify-content:center;margin-right:.375rem}.luna-avatar-default{width:2.5rem;height:2.5rem;border-radius:var(--lunaui-radius-pill);display:flex;align-items:center;justify-content:center;margin-right:.375rem;background-color:var(--lunaui-primary-700);font-size:var(--lunaui-size-xl);color:var(--lunaui-text-color)}.luna-avatar-username{font-size:var(--lunaui-size-xl);font-weight:700;transition:var(--transition-base)}.luna-button{display:flex;justify-content:center;align-items:center;border-radius:.625rem;padding:.5rem 1rem;color:var(--lunaui-text-color);font-size:var(--lunaui-size-md);font-weight:600;cursor:pointer;border:.125rem solid var(--lunaui-accent-700);gap:.625rem;transition:all .25s ease-in-out;width:100%;text-decoration:none;--luna-button-background: var(--lunaui-gray-700);--luna-button-font: var(--lunaui-gray-700);--luna-button-border: var(--lunaui-gray-800)}.luna-button:hover{background-color:color-mix(in srgb,var(--luna-button-background),transparent 20%);color:var(--lunaui-text-color)}.luna-button.primary{--luna-button-background: var(--lunaui-primary-700);--luna-button-font: var(--lunaui-primary-700);--luna-button-border: var(--lunaui-primary-800)}.luna-button.red{--luna-button-background: var(--lunaui-red-700);--luna-button-font: var(--lunaui-red-700);--luna-button-border: var(--lunaui-red-800)}.luna-button.green{--luna-button-background: var(--lunaui-green-700);--luna-button-font: var(--lunaui-green-700);--luna-button-border: var(--lunaui-green-800)}.luna-button.yellow{--luna-button-background: var(--lunaui-yellow-700);--luna-button-font: var(--lunaui-yellow-700);--luna-button-border: var(--lunaui-yellow-800)}.luna-button.blue{--luna-button-background: var(--lunaui-blue-700);--luna-button-font: var(--lunaui-blue-700);--luna-button-border: var(--lunaui-blue-800)}.luna-button.purple{--luna-button-background: var(--lunaui-purple-700);--luna-button-font: var(--lunaui-purple-700);--luna-button-border: var(--lunaui-purple-800)}.luna-button.cyan{--luna-button-background: var(--lunaui-cyan-700);--luna-button-font: var(--lunaui-cyan-700);--luna-button-border: var(--lunaui-cyan-800)}.luna-button.gray{--luna-button-background: var(--lunaui-gray-700);--luna-button-font: var(--lunaui-white);--luna-button-border: var(--lunaui-gray-800)}.luna-button.pink{--luna-button-background: var(--lunaui-pink-700);--luna-button-font: var(--lunaui-pink-700);--luna-button-border: var(--lunaui-pink-800)}.luna-button.solid{color:var(--lunaui-text-color);background-color:var(--luna-button-background);border:.125rem solid var(--luna-button-border)}.luna-button.solid:hover{background-color:color-mix(in srgb,var(--luna-button-background),transparent 20%);color:var(--lunaui-text-color)}.luna-button.border{color:var(--luna-button-font);border:.125rem solid var(--luna-button-border)}.luna-button.border:hover{background-color:var(--luna-button-background);color:var(--lunaui-text-color)}.luna-button.light{color:var(--luna-button-font);border:.125rem solid var(--luna-button-border)}.luna-button.light:hover{background-color:color-mix(in srgb,var(--luna-button-background),transparent 66%)}.luna-button.flat{color:var(--luna-button-font);background-color:color-mix(in srgb,var(--luna-button-background),transparent 66%);border:.125rem solid var(--luna-button-border)}.luna-button.flat:hover{background-color:color-mix(in srgb,var(--luna-button-background),transparent 76%)}.luna-button.shadow{background-color:var(--luna-button-background);box-shadow:0 .125rem .3125rem var(--luna-button-background);border:none}.luna-button.shadow:hover{box-shadow:0 .25rem .75rem var(--luna-button-background)}.luna-button.theme-dark{color:var(--lunaui-text-dark-font)}.luna-button.theme-light{color:var(--lunaui-white)}.luna-button-fixed-width{width:max-content}.luna-button-content{flex:1;display:flex;justify-content:center;align-items:center}.lunaui-dropdown-button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.375rem;height:3.125rem;padding:0 .875rem;margin:0;outline:0;border:1px solid var(--lunaui-accent-900);border-radius:var(--lunaui-radius-md);background-color:var(--lunaui-accent-800);font-family:inherit;font-size:1rem;font-weight:500;line-height:1.5rem;color:var(--color-gray-900);-webkit-user-select:none;user-select:none}@media (hover: hover){.lunaui-dropdown-button:hover{background-color:var(--lunaui-accent-700)}}.lunaui-dropdown-button:active,.lunaui-dropdown-button[data-popup-open]{background-color:var(--lunaui-accent-700)}.lunaui-dropdown-button:focus-visible{outline:2px solid var(--lunaui-accent-700);outline-offset:-1px}.lunaui-dropdown-button-icon{margin-right:-.25rem}.lunaui-dropdown-positioner{outline:0;z-index:11}.lunaui-dropdown-popup{box-sizing:border-box;padding-block:.25rem;border-radius:.375rem;background-color:canvas;color:var(--lunaui-text-color);transform-origin:var(--transform-origin);transition:transform .15s,opacity .15s;background-color:var(--lunaui-accent-800);z-index:11;outline:1px solid var(--lunaui-accent-500);box-shadow:0 10px 15px -3px var(--lunaui-accent-900),0 4px 6px -4px var(--lunaui-accent-900)}.lunaui-dropdown-popup[data-starting-style],.lunaui-dropdown-popup[data-ending-style]{opacity:0;transform:scale(.9)}.lunaui-dropdown-arrow{display:flex}.lunaui-dropdown-arrow[data-side=top]{bottom:-8px;rotate:180deg}.lunaui-dropdown-arrow[data-side=bottom]{top:-8px;rotate:0deg}.lunaui-dropdown-arrow[data-side=left]{right:-13px;rotate:90deg}.lunaui-dropdown-arrow[data-side=right]{left:-13px;rotate:-90deg}.lunaui-dropdown-item,.lunaui-dropdown-submenu-trigger{outline:0;cursor:default;-webkit-user-select:none;user-select:none;padding-block:.75rem;padding-left:1rem;padding-right:2rem;display:flex;font-size:.875rem;line-height:1rem;cursor:pointer}.lunaui-dropdown-item[data-popup-open],.lunaui-dropdown-submenu-trigger[data-popup-open]{z-index:0;position:relative}.lunaui-dropdown-item[data-popup-open]:before,.lunaui-dropdown-submenu-trigger[data-popup-open]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:.25rem;background-color:var(--lunaui-accent-800)}.lunaui-dropdown-item[data-highlighted],.lunaui-dropdown-submenu-trigger[data-highlighted]{z-index:0;position:relative;color:var(--lunaui-text-color)}.lunaui-dropdown-item[data-highlighted]:before,.lunaui-dropdown-submenu-trigger[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:.25rem;background-color:var(--lunaui-accent-900)}.lunaui-dropdown-submenu-trigger{align-items:center;justify-content:space-between;gap:1rem;padding-right:1rem}.lunaui-dropdown-separator{margin:.375rem 1rem;height:1px;background-color:var(--lunaui-accent-600)}.lunaui-context-trigger{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:15rem;height:12rem;border:1px solid var(--lunaui-accent-800);color:var(--lunaui-text-color);border-radius:.375rem;-webkit-user-select:none;user-select:none}.lunaui-content-positioner{outline:0;z-index:1}.lunaui-content-popup,.lunaui-content-submenu-popup{box-sizing:border-box;padding-block:.25rem;border-radius:.375rem;background-color:canvas;color:var(--lunaui-text-color);transform-origin:var(--transform-origin);transition:transform .15s,opacity .15s;background-color:var(--lunaui-accent-900)}.lunaui-content-popup[data-ending-style],.lunaui-content-submenu-popup[data-ending-style]{opacity:0}@media (prefers-color-scheme: light){.lunaui-content-popup,.lunaui-content-submenu-popup{outline:1px solid var(--lunaui-accent-800);box-shadow:0 10px 15px -3px var(--lunaui-accent-800),0 4px 6px -4px var(--lunaui-accent-800)}}@media (prefers-color-scheme: dark){.lunaui-content-popup,.lunaui-content-submenu-popup{outline:1px solid var(--lunaui-accent-800);outline-offset:-1px}}.lunaui-content-submenu-popup[data-starting-style],.lunaui-content-submenu-popup[data-ending-style]{transform:scale(.9);opacity:0}.ArrowFill{fill:canvas}@media (prefers-color-scheme: light){.ArrowOuterStroke{fill:var(--lunaui-accent-800)}}@media (prefers-color-scheme: dark){.ArrowInnerStroke{fill:var(--lunaui-accent-800)}}.lunaui-content-item,.lunaui-content-submenu-trigger{outline:0;cursor:default;-webkit-user-select:none;user-select:none;display:flex;font-size:.875rem;line-height:1rem}.lunaui-content-item[data-popup-open],.lunaui-content-submenu-trigger[data-popup-open]{z-index:0;position:relative}.lunaui-content-item[data-popup-open]:before,.lunaui-content-submenu-trigger[data-popup-open]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:.25rem;background-color:var(--lunaui-accent-800)}.lunaui-content-item[data-highlighted],.lunaui-content-submenu-trigger[data-highlighted]{z-index:0;position:relative;color:var(--lunaui-text-color)}.lunaui-content-item[data-highlighted]:before,.lunaui-content-submenu-trigger[data-highlighted]:before{content:"";z-index:-1;position:absolute;inset-block:0;inset-inline:.25rem;border-radius:.25rem;background-color:var(--lunaui-accent-800)}.lunaui-content-submenu-trigger{align-items:center;justify-content:space-between;padding-right:1rem}.lunaui-content-separator{margin:.375rem 1rem;height:1px;background-color:var(--lunaui-accent-800)}.luna-input-wrapper{display:flex;flex-direction:column}.luna-input-wrapper .luna-input-title{display:block;font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-semibold);color:var(--lunaui-text-color);margin:12px 0 4px 4px}.luna-input-wrapper .luna-input-subtitle{font-size:var(--lunaui-size-xs);margin:-4px 0 0 4px;color:var(--lunaui-text-light-font)}.luna-input-wrapper .luna-input-container{display:flex;align-items:center;position:relative;height:3.125rem;background-color:var(--lunaui-accent-800);outline:none;border-radius:var(--lunaui-radius-md);margin-top:.25rem;border:.125rem solid rgba(255,255,255,0)}.luna-input-wrapper .luna-input-container.luna-input-error{border-color:var(--lunaui-red-700)}.luna-input-wrapper .luna-input-container .luna-input-icon-left,.luna-input-wrapper .luna-input-container .luna-input-icon-right{height:100%;display:flex;align-items:center;justify-content:center;padding:0 .5rem;color:var(--lunaui-text-light-font)}.luna-input-wrapper .luna-input-container .luna-input-icon-left{margin-right:.25rem}.luna-input-wrapper .luna-input-container .luna-input-icon-right{margin-left:.25rem}.luna-input-wrapper .luna-input-container .luna-input{flex:1;border:none;outline:none;background:transparent;font-weight:var(--lunaui-weight-medium);color:var(--lunaui-text-color);padding:0 .5rem;font-size:var(--lunaui-size-md);height:100%}.luna-input-wrapper .luna-input-error-message{color:var(--lunaui-red-700);font-size:var(--lunaui-size-sm);margin:4px;display:block}.luna-input-wrapper .luna-input-required{color:var(--lunaui-red-600);margin:0 0 0 3px}.luna-label{display:inline-block;padding:.25rem .5rem;font-size:var(--lunaui-size-sm);border-radius:var(--lunaui-radius-md);font-weight:var(--lunaui-weight-medium);text-align:center;white-space:nowrap}.luna-label--size-xs{font-size:var(--lunaui-size-xs);padding:.1rem .25rem}.luna-label--size-sm{font-size:var(--lunaui-size-sm);padding:.2rem .25rem}.luna-label--size-md{font-size:var(--lunaui-size-md);padding:.25rem .5rem}.luna-label--size-lg{font-size:var(--lunaui-size-lg)}.luna-label--size-xl{font-size:var(--lunaui-size-xl)}.luna-label--size-2xl{font-size:var(--lunaui-size-2xl)}.luna-label{--label-background: var(--lunaui-primary-700);--label-color: var(--lunaui-primary-900);--label-font: var(--lunaui-text-color)}.luna-label--primary{--label-background: var(--lunaui-primary-800);--label-color: var(--lunaui-primary-100);--label-font: var(--lunaui-primary-700)}.luna-label--red{--label-background: var(--lunaui-red-800);--label-color: var(--lunaui-red-100);--label-font: var(--lunaui-red-700)}.luna-label--green{--label-background: var(--lunaui-green-800);--label-color: var(--lunaui-green-100);--label-font: var(--lunaui-green-700)}.luna-label--yellow{--label-background: var(--lunaui-yellow-800);--label-color: var(--lunaui-yellow-100);--label-font: var(--lunaui-yellow-700)}.luna-label--blue{--label-background: var(--lunaui-blue-800);--label-color: var(--lunaui-blue-100);--label-font: var(--lunaui-blue-700)}.luna-label--purple{--label-background: var(--lunaui-purple-800);--label-color: var(--lunaui-purple-100);--label-font: var(--lunaui-purple-700)}.luna-label--cyan{--label-background: var(--lunaui-cyan-800);--label-color: var(--lunaui-cyan-100);--label-font: var(--lunaui-cyan-700)}.luna-label--gray{--label-background: var(--lunaui-gray-800);--label-color: var(--lunaui-gray-100);--label-font: var(--lunaui-white)}.luna-label--pink{--label-background: var(--lunaui-pink-800);--label-color: var(--lunaui-pink-100);--label-font: var(--lunaui-pink-700)}.luna-label--solid{color:var(--lunaui-text-color);background-color:var(--label-background)}.luna-label--border{color:var(--label-font);border:1px solid var(--label-background)}.luna-label--light{color:var(--label-font)}.luna-label--flat{color:var(--label-font);background-color:color-mix(in srgb,var(--label-background),transparent 66%);border:1px solid var(--lunaui-accent-900)}.luna-label--shadow{color:var(--lunaui-text-color);background-color:var(--label-background);box-shadow:0 2px 5px var(--label-background)}.modal-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10;display:flex;justify-content:center;align-items:center;background-color:#00000080}.modal-content{background-color:var(--lunaui-accent-900);border:2px solid var(--lunaui-accent-700);color:var(--lunaui-text-color);border-radius:.75rem;min-width:18.75rem;max-width:95%;max-height:95%;overflow:auto;position:relative;display:flex;flex-direction:column}.modal-content.height-xs{height:30%}.modal-content.height-sm{height:40%}.modal-content.height-md{height:50%}.modal-content.height-lg{height:65%}.modal-content.height-xl{height:80%}.modal-content.xs{width:30rem}.modal-content.sm{width:48rem}.modal-content.md{width:64rem}.modal-content.lg{width:75rem}.modal-content.xl{width:90rem}.modal-close-button{position:absolute;top:8px;right:8px;font-size:var(--lunaui-size-lg);transition:color .3s ease-in-out}.modal-close-button:hover{cursor:pointer;color:var(--lunaui-red-700)}.modal-title{font-size:var(--lunaui-size-xl);font-weight:700;border-bottom:1px solid var(--lunaui-accent-600);padding:1.25rem .75rem}.modal-message{width:100%;font-weight:400;padding:.75rem;flex:1}.modal-actions{display:flex;justify-content:flex-end;gap:.625rem;border-top:1px solid var(--lunaui-accent-600);padding-top:.625rem;padding:.5rem .75rem}.luna-switch{display:flex;justify-content:center;align-items:center;cursor:pointer}.luna-switch-slider{display:inline-block;width:3.5em;height:2em;background-color:var(--lunaui-accent-600);border-radius:1em;position:relative;transition:.3s all ease-in-out}.luna-switch-slider:after{content:"";display:inline-block;width:1.5em;height:1.5em;background-color:#ddd;border-radius:.75em;position:absolute;top:.25em;transform:translate(.25em);box-shadow:10px 0 40px #0000001a;transition:.3s all ease-in-out}.luna-switch input[type=checkbox]:checked+.luna-switch-slider{background-color:var(--lunaui-primary-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.blue{background-color:var(--lunaui-blue-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.green{background-color:var(--lunaui-green-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.red{background-color:var(--lunaui-red-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.yellow{background-color:var(--lunaui-yellow-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.orange{background-color:var(--lunaui-orange-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.purple{background-color:var(--lunaui-purple-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.pink{background-color:var(--lunaui-pink-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.gray{background-color:var(--lunaui-gray-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider:after{transform:translate(1.75em);box-shadow:-10px 0 40px #0000001a}.luna-switch input[type=checkbox]{display:none}.luna-switch input[type=checkbox]:active+.luna-switch-slider:after{width:2.5em}.luna-switch input[type=checkbox]:checked:active+.luna-switch-slider:after{transform:translate(1.75em)}.luna-switch-text{margin-left:.5rem;font-size:var(--lunaui-size-lg)}.luna-switch input[type=checkbox]:disabled+.luna-switch-slider{background-color:var(--lunaui-gray-600);cursor:not-allowed}.luna-switch input[type=checkbox]:disabled+.luna-switch-slider:after{background-color:var(--lunaui-gray-400)}.luna-tabs{display:flex;flex-direction:row}.luna-tabs:first-child{border:none}.luna-tabs-item{border:.0625rem solid var(--lunaui-accent-700);padding:.5rem .75rem}.luna-tabs-item:hover{cursor:pointer;background-color:var(--lunaui-accent-700);color:var(--lunaui-accent-100);transition:all .2s ease-in-out}.luna-tabs-item.theme-dark{color:var(--lunaui-text-dark-font)}.luna-tabs-item.theme-light{color:var(--lunaui-white)}.luna-tabs-item.primary{--tab-background: var(--lunaui-primary-800);--tab-font: var(--lunaui-primary-700);--tab-border: var(--lunaui-primary-800)}.luna-tabs-item.red{--tab-background: var(--lunaui-red-800);--tab-font: var(--lunaui-red-700);--tab-border: var(--lunaui-red-800)}.luna-tabs-item.green{--tab-background: var(--lunaui-green-800);--tab-font: var(--lunaui-green-700);--tab-border: var(--lunaui-green-800)}.luna-tabs-item.yellow{--tab-background: var(--lunaui-yellow-800);--tab-font: var(--lunaui-yellow-700);--tab-border: var(--lunaui-yellow-800)}.luna-tabs-item.blue{--tab-background: var(--lunaui-blue-800);--tab-font: var(--lunaui-blue-700);--tab-border: var(--lunaui-blue-800)}.luna-tabs-item.purple{--tab-background: var(--lunaui-purple-800);--tab-font: var(--lunaui-purple-700);--tab-border: var(--lunaui-purple-800)}.luna-tabs-item.cyan{--tab-background: var(--lunaui-cyan-800);--tab-font: var(--lunaui-cyan-700);--tab-border: var(--lunaui-cyan-800)}.luna-tabs-item.gray{--tab-background: var(--lunaui-gray-800);--tab-font: var(--lunaui-white);--tab-border: var(--lunaui-gray-800)}.luna-tabs-item.pink{--tab-background: var(--lunaui-pink-800);--tab-font: var(--lunaui-pink-700);--tab-border: var(--lunaui-pink-800)}.luna-tabs-item.solid{color:var(--lunaui-text-color);background-color:var(--tab-background);border:1px solid var(--tab-border)}.luna-tabs-item.solid:hover{background-color:color-mix(in srgb,var(--tab-background),transparent 20%);color:var(--lunaui-text-color)}.luna-tabs-item.border{color:var(--tab-font);border:2px solid var(--tab-border)}.luna-tabs-item.border:hover{background-color:var(--tab-background);color:var(--lunaui-text-color)}.luna-tabs-item.light{color:var(--tab-font)}.luna-tabs-item.light:hover{background-color:color-mix(in srgb,var(--tab-background),transparent 66%)}.luna-tabs-item.flat{color:var(--tab-font);background-color:color-mix(in srgb,var(--tab-background),transparent 66%);border:1px solid var(--tab-border)}.luna-tabs-item.flat:hover{background-color:var(--tab-background);color:var(--lunaui-text-color)}.luna-tabs-item.shadow{background-color:var(--tab-background);box-shadow:0 2px 5px var(--tab-background);border:none}.luna-tabs-item.shadow:hover{box-shadow:0 4px 12px var(--tab-background)}.luna-tabs-item:first-child{border-radius:var(--lunaui-radius-sm) 0 0 var(--lunaui-radius-sm)}.luna-tabs-item:last-child{border-radius:0 var(--lunaui-radius-sm) var(--lunaui-radius-sm) 0}.luna-tabs-item:not(:last-child){border-right:none}.luna-textarea{width:100%;background-color:var(--lunaui-accent-800);border:none;outline:none;color:var(--lunaui-text-color);font-size:var(--lunaui-size-md);border-radius:var(--lunaui-radius-md);border:2px solid rgba(255,255,255,0);padding:.5rem;font-family:var(--lunaui-family);margin-top:.25rem}.luna-textarea:focus{border:2px solid var(--lunaui-primary-700)}.luna-textarea.luna-textarea-resize{resize:none}.luna-textarea-label{display:block;font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-semibold);color:var(--lunaui-text-color);margin:12px 0 4px 4px}.luna-textarea-description{font-size:var(--lunaui-size-xs);margin:-4px 0 0 4px;color:var(--lunaui-text-light-font)}.luna-textarea-error{color:var(--lunaui-red-700);font-size:var(--lunaui-size-sm);margin:0 4px;display:block}.luna-tooltip-container{position:relative;display:inline-block}.luna-tooltip-container:hover{cursor:pointer}.luna-tooltip{background-color:var(--lunaui-accent-600);color:var(--lunaui-text-color);padding:.5rem;font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-medium);border-radius:var(--lunaui-radius-sm);white-space:nowrap;z-index:10;max-width:12.5rem;--tooltip-background: var(--lunaui-primary-700);--tooltip-color: var(--lunaui-text-color);color:var(--tooltip-color);background-color:var(--tooltip-background)}.luna-tooltip .luna-tooltip--primary{--tooltip-background: var(--lunaui-primary-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.blue{--tooltip-background: var(--lunaui-blue-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.cyan{--tooltip-background: var(--lunaui-cyan-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.green{--tooltip-background: var(--lunaui-green-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.pink{--tooltip-background: var(--lunaui-pink-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.purple{--tooltip-background: var(--lunaui-purple-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.red{--tooltip-background: var(--lunaui-red-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.yellow{--tooltip-background: var(--lunaui-yellow-700);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip.gray{--tooltip-background: var(--lunaui-gray-600);--tooltip-color: var(--lunaui-text-color)}.luna-tooltip--arrow{display:flex}.luna-tooltip--arrow[data-side=top]{bottom:-8px;rotate:180deg}.luna-tooltip--arrow[data-side=bottom]{top:-8px;rotate:0deg}.luna-tooltip--arrow[data-side=left]{right:-13px;rotate:90deg}.luna-tooltip--arrow[data-side=right]{left:-13px;rotate:-90deg}.luna-tooltip--arrow-fill{fill:var(--tooltip-background)}@media (prefers-color-scheme: light){.luna-tooltip--arrow-outer-stroke{fill:var(--tooltip-background)}}@media (prefers-color-scheme: dark){.luna-tooltip--arrow-inner-stroke{fill:var(--tooltip-background)}}.lunaui-popover-icon-button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:auto;height:3.125rem;padding:0;margin:0;outline:0;border:1px solid var(--lunaui-accent-800);border-radius:.375rem;background-color:var(--lunaui-accent-900);color:var(--lunaui-text-color);-webkit-user-select:none;user-select:none;border-radius:var(--lunaui-radius-md);margin-top:.25rem}.lunaui-popover-icon-button:active,.lunaui-popover-icon-button[data-popup-open]{background-color:var(--lunaui-accent-700)}.lunaui-popover-icon-button:focus-visible{outline:2px solid var(--lunaui-accent-800);outline-offset:-1px}.lunaui-popover-icon{width:1.25rem;height:1.25rem}.lunaui-popover-popup{box-sizing:border-box;padding:1rem 1.5rem;border-radius:.5rem;background-color:canvas;color:var(--lunaui-text-color);transform-origin:var(--transform-origin);transition:transform .15s,opacity .15s;background-color:var(--lunaui-accent-800);outline:1px solid var(--lunaui-accent-800);box-shadow:0 10px 15px -3px var(--lunaui-accent-800),0 4px 6px -4px var(--lunaui-accent-800)}.lunaui-popover-popup[data-starting-style],.lunaui-popover-popup[data-ending-style]{opacity:0;transform:scale(.9)}.lunaui-popover-title{margin:0;font-size:1rem;line-height:1.5rem;font-weight:500}.lunaui-popover-description{margin:0;font-size:1rem;line-height:1.5rem;color:var(--lunaui-text-color)}.lunaui-popover-actions{display:flex;justify-content:end;gap:1rem}body{font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-medium);line-height:1.5;color:var(--lunaui-text-color);isolation:isolate}.luna-progress-container{display:flex;gap:.5rem;margin-top:1.25rem;justify-content:center}.luna-progress-section{width:1.5625rem;max-width:5.3125rem;height:.625rem;border-radius:.5rem;background-color:var(--lunaui-accent-500)}.luna-progress-section-active{flex:1;max-width:5.3125rem;height:.625rem;border-radius:.5rem;background-color:var(--lunaui-primary-600)}.luna-progress-section-complete{width:1.5625rem;height:.625rem;border-radius:.5rem;background-color:var(--lunaui-primary-600)}.lunaui-preview-popup{box-sizing:border-box;width:240px;display:flex;flex-direction:column;background-color:canvas;transform-origin:var(--transform-origin);transition:transform .15s,opacity .15s;outline:1px solid var(--lunaui-accent-900);background-color:var(--lunaui-accent-700)}.lunaui-preview-popup[data-starting-style],.lunaui-preview-popup[data-ending-style]{opacity:0;transform:scale(.9)}.Arrow{display:flex}.Arrow[data-side=top]{bottom:-8px;rotate:180deg}.Arrow[data-side=bottom]{top:-8px;rotate:0deg}.Arrow[data-side=left]{right:-13px;rotate:90deg}.Arrow[data-side=right]{left:-13px;rotate:-90deg}.ArrowFill{fill:var(--lunaui-accent-700)}.ArrowOuterStroke{fill:var(--lunaui-accent-900)}:root{--lunaui-text-color: #f3f6fb;--lunaui-text-dark-font: #1a0c09;--lunaui-text-light-font: #9fa9af;--lunaui-primary-50: var(--lunaui-green-50);--lunaui-primary-100: var(--lunaui-green-100);--lunaui-primary-200: var(--lunaui-green-200);--lunaui-primary-300: var(--lunaui-green-300);--lunaui-primary-400: var(--lunaui-green-400);--lunaui-primary-500: var(--lunaui-green-500);--lunaui-primary-600: var(--lunaui-green-600);--lunaui-primary-700: var(--lunaui-green-700);--lunaui-primary-800: var(--lunaui-green-800);--lunaui-primary-900: var(--lunaui-green-900)}[data-color=Blue]{--lunaui-primary-50: var(--lunaui-blue-50);--lunaui-primary-100: var(--lunaui-blue-100);--lunaui-primary-200: var(--lunaui-blue-200);--lunaui-primary-300: var(--lunaui-blue-300);--lunaui-primary-400: var(--lunaui-blue-400);--lunaui-primary-500: var(--lunaui-blue-500);--lunaui-primary-600: var(--lunaui-blue-600);--lunaui-primary-700: var(--lunaui-blue-700);--lunaui-primary-800: var(--lunaui-blue-800);--lunaui-primary-900: var(--lunaui-blue-900)}[data-color=Purple]{--lunaui-primary-50: var(--lunaui-purple-50);--lunaui-primary-100: var(--lunaui-purple-100);--lunaui-primary-200: var(--lunaui-purple-200);--lunaui-primary-300: var(--lunaui-purple-300);--lunaui-primary-400: var(--lunaui-purple-400);--lunaui-primary-500: var(--lunaui-purple-500);--lunaui-primary-600: var(--lunaui-purple-600);--lunaui-primary-700: var(--lunaui-purple-700);--lunaui-primary-800: var(--lunaui-purple-800);--lunaui-primary-900: var(--lunaui-purple-900)}[data-color=Green]{--lunaui-primary-50: var(--lunaui-green-50);--lunaui-primary-100: var(--lunaui-green-100);--lunaui-primary-200: var(--lunaui-green-200);--lunaui-primary-300: var(--lunaui-green-300);--lunaui-primary-400: var(--lunaui-green-400);--lunaui-primary-500: var(--lunaui-green-500);--lunaui-primary-600: var(--lunaui-green-600);--lunaui-primary-700: var(--lunaui-green-700);--lunaui-primary-800: var(--lunaui-green-800);--lunaui-primary-900: var(--lunaui-green-900)}[data-color=Yellow]{--lunaui-primary-50: var(--lunaui-yellow-50);--lunaui-primary-100: var(--lunaui-yellow-100);--lunaui-primary-200: var(--lunaui-yellow-200);--lunaui-primary-300: var(--lunaui-yellow-300);--lunaui-primary-400: var(--lunaui-yellow-400);--lunaui-primary-500: var(--lunaui-yellow-500);--lunaui-primary-600: var(--lunaui-yellow-600);--lunaui-primary-700: var(--lunaui-yellow-700);--lunaui-primary-800: var(--lunaui-yellow-800);--lunaui-primary-900: var(--lunaui-yellow-900)}[data-color=Red]{--lunaui-primary-50: var(--lunaui-red-50);--lunaui-primary-100: var(--lunaui-red-100);--lunaui-primary-200: var(--lunaui-red-200);--lunaui-primary-300: var(--lunaui-red-300);--lunaui-primary-400: var(--lunaui-red-400);--lunaui-primary-500: var(--lunaui-red-500);--lunaui-primary-600: var(--lunaui-red-600);--lunaui-primary-700: var(--lunaui-red-700);--lunaui-primary-800: var(--lunaui-red-800);--lunaui-primary-900: var(--lunaui-red-900)}[data-color=Cyan]{--lunaui-primary-50: var(--lunaui-cyan-50);--lunaui-primary-100: var(--lunaui-cyan-100);--lunaui-primary-200: var(--lunaui-cyan-200);--lunaui-primary-300: var(--lunaui-cyan-300);--lunaui-primary-400: var(--lunaui-cyan-400);--lunaui-primary-500: var(--lunaui-cyan-500);--lunaui-primary-600: var(--lunaui-cyan-600);--lunaui-primary-700: var(--lunaui-cyan-700);--lunaui-primary-800: var(--lunaui-cyan-800);--lunaui-primary-900: var(--lunaui-cyan-900)}[data-color=Pink]{--lunaui-primary-50: var(--lunaui-pink-50);--lunaui-primary-100: var(--lunaui-pink-100);--lunaui-primary-200: var(--lunaui-pink-200);--lunaui-primary-300: var(--lunaui-pink-300);--lunaui-primary-400: var(--lunaui-pink-400);--lunaui-primary-500: var(--lunaui-pink-500);--lunaui-primary-600: var(--lunaui-pink-600);--lunaui-primary-700: var(--lunaui-pink-700);--lunaui-primary-800: var(--lunaui-pink-800);--lunaui-primary-900: var(--lunaui-pink-900)}@media (prefers-color-scheme: dark){:root{--lunaui-text-color: #f3f6fb;--lunaui-text-dark-font: #1a0c09;--lunaui-text-light-font: #9fa9af;--lunaui-accent-50: var(--lunaui-gray-50);--lunaui-accent-100: var(--lunaui-gray-100);--lunaui-accent-200: var(--lunaui-gray-200);--lunaui-accent-300: var(--lunaui-gray-300);--lunaui-accent-400: var(--lunaui-gray-400);--lunaui-accent-500: var(--lunaui-gray-500);--lunaui-accent-600: var(--lunaui-gray-600);--lunaui-accent-700: var(--lunaui-gray-700);--lunaui-accent-800: var(--lunaui-gray-800);--lunaui-accent-900: var(--lunaui-gray-900)}}@media (prefers-color-scheme: light){:root{--lunaui-text-color: #0c0c0c;--lunaui-text-dark-font: #f3f6fb;--lunaui-text-light-font: #4c5155;--lunaui-accent-50: var(--lunaui-white-900);--lunaui-accent-100: var(--lunaui-white-800);--lunaui-accent-200: var(--lunaui-white-700);--lunaui-accent-300: var(--lunaui-white-600);--lunaui-accent-400: var(--lunaui-white-500);--lunaui-accent-500: var(--lunaui-white-400);--lunaui-accent-600: var(--lunaui-white-300);--lunaui-accent-700: var(--lunaui-white-200);--lunaui-accent-800: var(--lunaui-white-100);--lunaui-accent-900: var(--lunaui-white-50)}}[data-theme=dark]{--lunaui-text-color: #f3f6fb;--lunaui-text-dark-font: #1a0c09;--lunaui-text-light-font: #9fa9af;--lunaui-accent-50: var(--lunaui-gray-50);--lunaui-accent-100: var(--lunaui-gray-100);--lunaui-accent-200: var(--lunaui-gray-200);--lunaui-accent-300: var(--lunaui-gray-300);--lunaui-accent-400: var(--lunaui-gray-400);--lunaui-accent-500: var(--lunaui-gray-500);--lunaui-accent-600: var(--lunaui-gray-600);--lunaui-accent-700: var(--lunaui-gray-700);--lunaui-accent-800: var(--lunaui-gray-800);--lunaui-accent-900: var(--lunaui-gray-900)}[data-theme=light]{--lunaui-text-color: #0c0c0c;--lunaui-text-dark-font: #f3f6fb;--lunaui-text-light-font: #4c5155;--lunaui-accent-50: var(--lunaui-white-900);--lunaui-accent-100: var(--lunaui-white-800);--lunaui-accent-200: var(--lunaui-white-700);--lunaui-accent-300: var(--lunaui-white-600);--lunaui-accent-400: var(--lunaui-white-500);--lunaui-accent-500: var(--lunaui-white-400);--lunaui-accent-600: var(--lunaui-white-300);--lunaui-accent-700: var(--lunaui-white-200);--lunaui-accent-800: var(--lunaui-white-100);--lunaui-accent-900: var(--lunaui-white-50)}.luna-title{display:block;font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-semibold);color:var(--lunaui-text-color);margin:.75rem 0 .25rem .25rem}.luna-error{color:var(--lunaui-red-700);font-size:var(--lunaui-size-sm);margin:.25rem;display:block}.luna-error-general{color:var(--lunaui-red-700);font-size:var(--lunaui-size-md);margin:.25rem;display:block;text-align:center}.luna-desc{font-size:var(--lunaui-size-sm);margin:.5rem 0 0 .25rem;color:var(--lunaui-text-light-font)}.luna-short-desc{font-size:var(--lunaui-size-xs);margin:.5rem 0 0 .25rem;color:var(--lunaui-text-light-font);margin-top:-pxToRem(4)}.luna-required{color:var(--lunaui-red-600);margin:0 0 0 .1875rem}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--lunaui-accent-700) inset;-webkit-text-fill-color:var(--lunaui-text-color);caret-color:var(--lunaui-text-color)}input:-webkit-autofill:focus,input:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px var(--lunaui-accent-700) inset;-webkit-text-fill-color:var(--lunaui-text-color)}