@import './ui-accordion/ui-accordion.css';
@import './ui-alert/ui-alert.css';
@import './ui-button/ui-button.css';
@import './ui-breadcrumb/ui-breadcrumb.css';
@import './ui-checkbox/ui-checkbox.css';
@import './ui-separator/ui-separator.css';
@import './ui-field/ui-field.css';
@import './ui-focus/ui-focus.css';
@import './ui-icon/ui-icon.css';
@import './ui-input/ui-input.css';
@import './ui-label/ui-label.css';
@import './ui-listbox/ui-listbox.css';
@import './ui-portal/ui-portal.css';
@import './ui-select/ui-select.css';
@import './ui-spinner/ui-spinner.css';
@import './ui-switch/ui-switch.css';
@import './ui-tabs/ui-tabs.css';
@import './ui-text/ui-text.css';
@import './ui-textarea/ui-textarea.css';

:root{
  /* line height */
  --ui-line-height-100:1.0;
  --ui-line-height-150:1.5;

  /* font family */
  --ui-font-family:Arial,Helvetica,sans-serif;
  --ui-font-family-ui-monospace:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;

  /* scrollbar */
  --ui-color-scrollbar:var(--ui-color-gray-600);

  /* ui size */
  --ui-size-x-small:16px;
  --ui-size-small:24px;
  --ui-size-medium:32px;
  --ui-size-large:40px;
  --ui-size-x-large:48px;

  /* h size */
  --ui-h1-size:40px;
  --ui-h2-size:32px;
  --ui-h3-size:28px;
  --ui-h4-size:24px;
  --ui-h5-size:20px;
  --ui-h6-size:18px;

  /* font size */
  --ui-font-size-x-small:11px;
  --ui-font-size-small:12px;
  --ui-font-size-medium:14px;
  --ui-font-size-large:16px;
  --ui-font-size-x-large:18px;

  /* colors */
  --ui-color-black:oklch(0% 0 0);
  --ui-color-white:oklch(100% 0 0);

  /* gray */
  --ui-color-gray-100:oklch(90% 0 0);
  --ui-color-gray-150:oklch(85% 0 0);
  --ui-color-gray-200:oklch(80% 0 0);
  --ui-color-gray-250:oklch(75% 0 0);
  --ui-color-gray-300:oklch(70% 0 0);
  --ui-color-gray-350:oklch(65% 0 0);
  --ui-color-gray-400:oklch(60% 0 0);
  --ui-color-gray-450:oklch(55% 0 0);
  --ui-color-gray-500:oklch(50% 0 0);
  --ui-color-gray-550:oklch(45% 0 0);
  --ui-color-gray-600:oklch(40% 0 0);
  --ui-color-gray-650:oklch(35% 0 0);
  --ui-color-gray-700:oklch(30% 0 0);
  --ui-color-gray-750:oklch(25% 0 0);
  --ui-color-gray-800:oklch(20% 0 0);
  --ui-color-gray-850:oklch(15% 0 0);
  --ui-color-gray-900:oklch(10% 0 0);

  /* red */
  --ui-color-red-100:oklch(95% 0.01 27);
  --ui-color-red-200:oklch(88% 0.05 27);
  --ui-color-red-300:oklch(78% 0.10 27);
  --ui-color-red-400:oklch(68% 0.18 27);
  --ui-color-red-500:oklch(60% 0.23 27);
  --ui-color-red-600:oklch(52% 0.23 27);
  --ui-color-red-700:oklch(45% 0.21 27);
  --ui-color-red-800:oklch(38% 0.18 27);
  --ui-color-red-900:oklch(30% 0.15 27);

  /* green */
  --ui-color-green-100:oklch(95% 0.01 148);
  --ui-color-green-200:oklch(88% 0.05 148);
  --ui-color-green-300:oklch(78% 0.10 148);
  --ui-color-green-400:oklch(70% 0.16 148);
  --ui-color-green-500:oklch(66% 0.19 148);
  --ui-color-green-600:oklch(58% 0.19 148);
  --ui-color-green-700:oklch(48% 0.17 148);
  --ui-color-green-800:oklch(38% 0.14 148);
  --ui-color-green-900:oklch(30% 0.12 148);

  /* blue */
  --ui-color-blue-100:oklch(95% 0.01 252);
  --ui-color-blue-200:oklch(90% 0.04 252);
  --ui-color-blue-300:oklch(80% 0.10 252);
  --ui-color-blue-400:oklch(70% 0.15 252);
  --ui-color-blue-500:oklch(63% 0.23 252);
  --ui-color-blue-600:oklch(57% 0.25 252);
  --ui-color-blue-700:oklch(50% 0.23 252);
  --ui-color-blue-800:oklch(42% 0.22 252);
  --ui-color-blue-900:oklch(28% 0.18 252);

  /* yellow */
  --ui-color-yellow-100:oklch(98% 0.01 83);
  --ui-color-yellow-200:oklch(93% 0.04 83);
  --ui-color-yellow-300:oklch(88% 0.08 83);
  --ui-color-yellow-400:oklch(84% 0.13 83);
  --ui-color-yellow-500:oklch(81% 0.17 83);
  --ui-color-yellow-600:oklch(72% 0.17 83);
  --ui-color-yellow-700:oklch(60% 0.15 83);
  --ui-color-yellow-800:oklch(50% 0.13 83);
  --ui-color-yellow-900:oklch(40% 0.10 83);

  /* border radius */
  --ui-border-radius-square:none;
  --ui-border-radius-rounded:8px;
  --ui-border-radius-pill:9999px;
  --ui-border-radius-circle:50%;

  /* text-align */
  --ui-text-align-center:center;
  --ui-text-align-start:start;
  --ui-text-align-end:end;

  /* transition */
  --ui-transition-duration:0.15s;

  /* outline */
  --ui-outline-offset:2px;
  --ui-outline-width:2px;
  --ui-outline-style:solid;
  --ui-outline-color:var(--ui-color-gray-500);
}

[ui]{
  direction:inherit;
  -webkit-user-select:none;
  user-select:none;}

[ui] input,
[ui] textarea{
 font-family:var(--ui-font-family);}

[ui] input::-ms-reveal{display:none;}

[ui],
[ui] *{
  box-sizing:border-box!important;}



[ui][loading]{
  cursor:default;}

[ui] svg{
  display:block;
  fill:currentColor;
  /*stroke:currentColor;*/
  pointer-events:none;
  shape-rendering:geometricPrecision;}

[role="button"],
[role="switch"],
[role="checkbox"],
[role="combobox"],
[role="option"]{
  cursor:pointer;
  touch-action:manipulation;}

button{
  appearance:none;
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  touch-action:manipulation;}

button[disabled],
[disabled]{
  cursor:not-allowed;}

[disabled]{
  opacity:0.5;
  pointer-events:auto;}

[disabled] *{
  pointer-events:none;}

/* animations */
@keyframes rotate360{
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

/* accent warning danger success */