nuxt-glorious 2.0.0-develop-32 → 2.0.0-develop-34

package/dist/runtime/style/style.css

@@ -1,763 +1,32 @@
-@charset "UTF-8";
-.glorious-accordion {
-  @apply border rounded h-max text-sm cursor-pointer;
-}
-.glorious-accordion.color-orange {
-  @apply border-orange-500;
-}
-.glorious-accordion.color-orange div.header:hover {
-  @apply rounded bg-orange-100;
-}
-.glorious-accordion.color-orange.accordion-open + div.body {
-  @apply mt-2 pt-3 border-t border-orange-500;
+.glorious-loading {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
+  @apply border-3;
 }
-.glorious-accordion.color-blue {
-  @apply border-blue-500;
+.glorious-loading.color-primary {
+  @apply border-primary-500;
 }
-.glorious-accordion.color-blue div.header:hover {
-  @apply rounded bg-blue-100;
+.glorious-loading.color-secondary {
+  @apply border-secondary-500;
 }
-.glorious-accordion.color-blue.accordion-open + div.body {
-  @apply mt-2 pt-3 border-t border-blue-500;
+.glorious-loading.color-sky {
+  @apply border-sky-500;
 }
-.glorious-accordion.color-gray {
+.glorious-loading.color-gray {
   @apply border-gray-500;
 }
-.glorious-accordion.color-gray div.header:hover {
-  @apply rounded bg-gray-100;
-}
-.glorious-accordion.color-gray.accordion-open + div.body {
-  @apply mt-2 pt-3 border-t border-gray-500;
-}
-.glorious-accordion.color-red {
+.glorious-loading.color-red {
   @apply border-red-500;
 }
-.glorious-accordion.color-red div.header:hover {
-  @apply rounded bg-red-100;
-}
-.glorious-accordion.color-red.accordion-open + div.body {
-  @apply mt-2 pt-3 border-t border-red-500;
-}
-.glorious-accordion.color-green {
-  @apply border-green-500;
-}
-.glorious-accordion.color-green div.header:hover {
-  @apply rounded bg-green-100;
-}
-.glorious-accordion.color-green.accordion-open + div.body {
-  @apply mt-2 pt-3 border-t border-green-500;
-}
-.glorious-accordion div.header {
-  @apply p-3 flex justify-between items-center;
-}
-.glorious-accordion div.header div:last-child {
-  @apply rotate-90 transition-[rotate] duration-300 ease-out text-sm;
-}
-.glorious-accordion div.header.accordion-open div:last-child {
-  @apply rotate-270 transition-[rotate] duration-300 ease-out;
-}
-.glorious-accordion div.header.accordion-open + div.body {
-  @apply border-t py-3;
-}
-.glorious-accordion div.body {
-  @apply px-3 max-h-0 overflow-hidden transition-all duration-300 ease-out text-sm;
-}
-
-.glorious-alert {
-  @apply p-3 rounded-md shadow-md;
-}
-.glorious-alert.color-orange {
-  @apply bg-orange-100;
-}
-.glorious-alert.color-blue {
-  @apply bg-blue-100;
-}
-.glorious-alert.color-gray {
-  @apply bg-gray-100;
-}
-.glorious-alert.color-red {
-  @apply bg-red-100;
-}
-.glorious-alert.color-green {
-  @apply bg-green-100;
-}
-.glorious-alert.color-orange {
-  @apply border border-orange-300;
-}
-.glorious-alert.color-blue {
-  @apply border border-blue-300;
-}
-.glorious-alert.color-gray {
-  @apply border border-gray-300;
-}
-.glorious-alert.color-red {
-  @apply border border-red-300;
-}
-.glorious-alert.color-green {
-  @apply border border-green-300;
-}
-
-.glorious-avatar {
-  @apply overflow-hidden;
-}
-.glorious-avatar.size-5xl {
-  @apply w-[58px] h-[58px];
-}
-.glorious-avatar.size-5xl > img {
-  @apply w-[58px] h-[58px];
-}
-.glorious-avatar.size-4xl {
-  @apply w-[54px] h-[54px];
-}
-.glorious-avatar.size-4xl > img {
-  @apply w-[54px] h-[54px];
-}
-.glorious-avatar.size-3xl {
-  @apply w-[50px] h-[50px];
-}
-.glorious-avatar.size-3xl > img {
-  @apply w-[50px] h-[50px];
-}
-.glorious-avatar.size-2xl {
-  @apply w-[46px] h-[46px];
-}
-.glorious-avatar.size-2xl > img {
-  @apply w-[46px] h-[46px];
-}
-.glorious-avatar.size-xl {
-  @apply w-[42px] h-[42px];
-}
-.glorious-avatar.size-xl > img {
-  @apply w-[42px] h-[42px];
-}
-.glorious-avatar.size-lg {
-  @apply w-[36px] h-[36px];
-}
-.glorious-avatar.size-lg > img {
-  @apply w-[36px] h-[36px];
-}
-.glorious-avatar.size-md {
-  @apply w-[32px] h-[32px];
-}
-.glorious-avatar.size-md > img {
-  @apply w-[32px] h-[32px];
-}
-.glorious-avatar.size-sm {
-  @apply w-[28px] h-[28px];
-}
-.glorious-avatar.size-sm > img {
-  @apply w-[28px] h-[28px];
-}
-.glorious-avatar.size-xs {
-  @apply w-[24px] h-[24px];
-}
-.glorious-avatar.size-xs > img {
-  @apply w-[24px] h-[24px];
-}
-
-.glorious-breadcrumb {
-  @apply text-sm text-gray-500;
-}
-.glorious-breadcrumb .end-text {
-  @apply font-bold text-base text-black;
-}
-
-button:focus-visible {
-  @apply outline-none;
-}
-
-.glorious-button {
-  @apply rounded-md text-white px-3 relative cursor-pointer;
-}
-.glorious-button div > loading {
-  @apply flex justify-center items-center;
+.glorious-loading.size-sm {
+  @apply w-5;
 }
-.glorious-button div.loading > div > div {
+.glorious-loading.size-md {
   @apply w-6;
 }
-.glorious-button.size-xl {
-  @apply py-2.5;
-}
-.glorious-button.size-lg {
-  @apply py-2;
-}
-.glorious-button.size-md {
-  @apply py-1.5;
-}
-.glorious-button.size-sm {
-  @apply py-1;
-}
-.glorious-button.size-xs {
-  @apply py-0.5;
-}
-
-.button-color-orange {
-  @apply bg-orange-600 border-orange-700 hover:bg-orange-700;
-}
-.button-color-orange.outline {
-  @apply bg-transparent border outline-none;
-  @apply text-orange-500 hover:bg-orange-100;
-}
-.button-color-orange.outline div.loading > div > div {
-  border-color: theme("colors.orange.700") !important;
-}
-.button-color-orange:disabled {
-  @apply cursor-not-allowed;
-}
-.button-color-orange:disabled:not(:disabled) {
-  @apply bg-orange-300;
-}
-
-.button-color-blue {
-  @apply bg-blue-600 border-blue-700 hover:bg-blue-700;
-}
-.button-color-blue.outline {
-  @apply bg-transparent border outline-none;
-  @apply text-blue-500 hover:bg-blue-100;
-}
-.button-color-blue.outline div.loading > div > div {
-  border-color: theme("colors.blue.700") !important;
-}
-.button-color-blue:disabled {
-  @apply cursor-not-allowed;
-}
-.button-color-blue:disabled:not(:disabled) {
-  @apply bg-blue-300;
-}
-
-.button-color-gray {
-  @apply bg-gray-600 border-gray-700 hover:bg-gray-700;
-}
-.button-color-gray.outline {
-  @apply bg-transparent border outline-none;
-  @apply text-gray-500 hover:bg-gray-100;
-}
-.button-color-gray.outline div.loading > div > div {
-  border-color: theme("colors.gray.700") !important;
-}
-.button-color-gray:disabled {
-  @apply cursor-not-allowed;
-}
-.button-color-gray:disabled:not(:disabled) {
-  @apply bg-gray-300;
-}
-
-.button-color-red {
-  @apply bg-red-600 border-red-700 hover:bg-red-700;
-}
-.button-color-red.outline {
-  @apply bg-transparent border outline-none;
-  @apply text-red-500 hover:bg-red-100;
-}
-.button-color-red.outline div.loading > div > div {
-  border-color: theme("colors.red.700") !important;
-}
-.button-color-red:disabled {
-  @apply cursor-not-allowed;
-}
-.button-color-red:disabled:not(:disabled) {
-  @apply bg-red-300;
-}
-
-.button-color-green {
-  @apply bg-green-600 border-green-700 hover:bg-green-700;
-}
-.button-color-green.outline {
-  @apply bg-transparent border outline-none;
-  @apply text-green-500 hover:bg-green-100;
-}
-.button-color-green.outline div.loading > div > div {
-  border-color: theme("colors.green.700") !important;
-}
-.button-color-green:disabled {
-  @apply cursor-not-allowed;
-}
-.button-color-green:disabled:not(:disabled) {
-  @apply bg-green-300;
-}
-
-.glorious-checkbox {
-  @apply block relative cursor-pointer;
-}
-.glorious-checkbox > input {
-  @apply hidden;
-}
-.glorious-checkbox > input:checked ~ div {
-  @apply border-none;
-}
-.glorious-checkbox > input:checked ~ div:after {
-  @apply block h-max w-max;
-}
-.glorious-checkbox > input:disabled ~ div {
-  @apply cursor-not-allowed;
-}
-.glorious-checkbox > div:last-child {
-  @apply border border-gray-500 rounded bg-white left-0 top-0 absolute hover:shadow-lg;
-}
-.glorious-checkbox > div:last-child > div:first-child {
-  @apply hidden;
-}
-.glorious-checkbox > div:last-child:after {
-  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNIDI4LjI4MTI1IDYuMjgxMjUgTCAxMSAyMy41NjI1IEwgMy43MTg3NSAxNi4yODEyNSBMIDIuMjgxMjUgMTcuNzE4NzUgTCAxMC4yODEyNSAyNS43MTg3NSBMIDExIDI2LjQwNjI1IEwgMTEuNzE4NzUgMjUuNzE4NzUgTCAyOS43MTg3NSA3LjcxODc1IFoiLz48L3N2Zz4K);
-  @apply absolute hidden top-1 right-0 left-0 bottom-0 m-auto;
-}
-.glorious-checkbox.color-orange > input:checked ~ div {
-  @apply bg-orange-500;
-}
-.glorious-checkbox.color-blue > input:checked ~ div {
-  @apply bg-blue-500;
-}
-.glorious-checkbox.color-gray > input:checked ~ div {
-  @apply bg-gray-500;
-}
-.glorious-checkbox.color-red > input:checked ~ div {
-  @apply bg-red-500;
-}
-.glorious-checkbox.color-green > input:checked ~ div {
-  @apply bg-green-500;
-}
-.glorious-checkbox.size-5xl {
-  @apply w-[54px] h-[54px];
-}
-.glorious-checkbox.size-5xl > div:last-child {
-  @apply w-[54px] h-[54px];
-}
-.glorious-checkbox.size-4xl {
-  @apply w-[50px] h-[50px];
-}
-.glorious-checkbox.size-4xl > div:last-child {
-  @apply w-[50px] h-[50px];
-}
-.glorious-checkbox.size-3xl {
-  @apply w-[46px] h-[46px];
-}
-.glorious-checkbox.size-3xl > div:last-child {
-  @apply w-[46px] h-[46px];
-}
-.glorious-checkbox.size-2xl {
-  @apply w-[42px] h-[42px];
-}
-.glorious-checkbox.size-2xl > div:last-child {
-  @apply w-[42px] h-[42px];
-}
-.glorious-checkbox.size-xl {
-  @apply w-[38px] h-[38px];
-}
-.glorious-checkbox.size-xl > div:last-child {
-  @apply w-[38px] h-[38px];
-}
-.glorious-checkbox.size-lg {
-  @apply w-[32px] h-[32px];
-}
-.glorious-checkbox.size-lg > div:last-child {
-  @apply w-[32px] h-[32px];
-}
-.glorious-checkbox.size-md {
-  @apply w-[28px] h-[28px];
-}
-.glorious-checkbox.size-md > div:last-child {
-  @apply w-[28px] h-[28px];
-}
-.glorious-checkbox.size-sm {
-  @apply w-[24px] h-[24px];
-}
-.glorious-checkbox.size-sm > div:last-child {
-  @apply w-[24px] h-[24px];
-}
-.glorious-checkbox.size-xs {
-  @apply w-[20px] h-[20px];
-}
-.glorious-checkbox.size-xs > div:last-child {
-  @apply w-[20px] h-[20px];
-}
-
-.glorious-drawer {
-  @apply fixed top-0 bg-white h-full w-[300px] z-[50];
-}
-.glorious-drawer > div {
-  @apply bg-white min-h-screen;
-}
-.glorious-drawer.close.right {
-  animation: drawer-close-right 250ms normal forwards;
-}
-.glorious-drawer.close.left {
-  animation: drawer-close-left 250ms normal forwards;
-}
-.glorious-drawer.open {
-  @apply flex;
-}
-.glorious-drawer.open.right {
-  animation: drawer-open-right 100ms normal forwards;
-}
-.glorious-drawer.open.left {
-  animation: drawer-open-left 100ms normal forwards;
-}
-
-@keyframes drawer-open-right {
-  from {
-    right: -300px;
-  }
-  to {
-    right: 0;
-  }
-}
-@keyframes drawer-close-right {
-  from {
-    right: 0;
-  }
-  to {
-    right: 300px;
-    display: hidden;
-  }
-}
-@keyframes drawer-open-left {
-  from {
-    left: -300px;
-  }
-  to {
-    left: 0;
-  }
-}
-@keyframes drawer-close-left {
-  from {
-    left: 0;
-  }
-  to {
-    left: -300px;
-    display: hidden;
-  }
-}
-.glorious-file-orange {
-  @apply ring-orange-500;
-  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
-}
-.glorious-file-orange > div.placeholder {
-  @apply bg-orange-500;
-  @apply text-white px-3 w-max;
-}
-.glorious-file-orange > div.placeholder.size-xl {
-  @apply py-2.5;
-}
-.glorious-file-orange > div.placeholder.size-lg {
-  @apply py-2;
-}
-.glorious-file-orange > div.placeholder.size-md {
-  @apply py-1.5;
-}
-.glorious-file-orange > div.placeholder.size-sm {
-  @apply py-1;
-}
-.glorious-file-orange > div.placeholder.size-xs {
-  @apply py-0.5;
-}
-.glorious-file-orange > div:last-child {
-  @apply absolute left-3 hidden;
-}
-
-.glorious-file-blue {
-  @apply ring-blue-500;
-  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
-}
-.glorious-file-blue > div.placeholder {
-  @apply bg-blue-500;
-  @apply text-white px-3 w-max;
-}
-.glorious-file-blue > div.placeholder.size-xl {
-  @apply py-2.5;
-}
-.glorious-file-blue > div.placeholder.size-lg {
-  @apply py-2;
-}
-.glorious-file-blue > div.placeholder.size-md {
-  @apply py-1.5;
-}
-.glorious-file-blue > div.placeholder.size-sm {
-  @apply py-1;
-}
-.glorious-file-blue > div.placeholder.size-xs {
-  @apply py-0.5;
-}
-.glorious-file-blue > div:last-child {
-  @apply absolute left-3 hidden;
-}
-
-.glorious-file-gray {
-  @apply ring-gray-500;
-  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
-}
-.glorious-file-gray > div.placeholder {
-  @apply bg-gray-500;
-  @apply text-white px-3 w-max;
-}
-.glorious-file-gray > div.placeholder.size-xl {
-  @apply py-2.5;
-}
-.glorious-file-gray > div.placeholder.size-lg {
-  @apply py-2;
-}
-.glorious-file-gray > div.placeholder.size-md {
-  @apply py-1.5;
-}
-.glorious-file-gray > div.placeholder.size-sm {
-  @apply py-1;
-}
-.glorious-file-gray > div.placeholder.size-xs {
-  @apply py-0.5;
-}
-.glorious-file-gray > div:last-child {
-  @apply absolute left-3 hidden;
-}
-
-.glorious-file-red {
-  @apply ring-red-500;
-  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
-}
-.glorious-file-red > div.placeholder {
-  @apply bg-red-500;
-  @apply text-white px-3 w-max;
-}
-.glorious-file-red > div.placeholder.size-xl {
-  @apply py-2.5;
-}
-.glorious-file-red > div.placeholder.size-lg {
-  @apply py-2;
-}
-.glorious-file-red > div.placeholder.size-md {
-  @apply py-1.5;
-}
-.glorious-file-red > div.placeholder.size-sm {
-  @apply py-1;
-}
-.glorious-file-red > div.placeholder.size-xs {
-  @apply py-0.5;
-}
-.glorious-file-red > div:last-child {
-  @apply absolute left-3 hidden;
-}
-
-.glorious-file-green {
-  @apply ring-green-500;
-  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
-}
-.glorious-file-green > div.placeholder {
-  @apply bg-green-500;
-  @apply text-white px-3 w-max;
-}
-.glorious-file-green > div.placeholder.size-xl {
-  @apply py-2.5;
-}
-.glorious-file-green > div.placeholder.size-lg {
-  @apply py-2;
-}
-.glorious-file-green > div.placeholder.size-md {
-  @apply py-1.5;
-}
-.glorious-file-green > div.placeholder.size-sm {
-  @apply py-1;
-}
-.glorious-file-green > div.placeholder.size-xs {
-  @apply py-0.5;
-}
-.glorious-file-green > div:last-child {
-  @apply absolute left-3 hidden;
-}
-
-.glorious-input-orange {
-  @apply ring-orange-500;
-  @apply rounded-md ring-1 bg-white;
-}
-.glorious-input-orange.size-xl {
-  @apply py-2.5;
-}
-.glorious-input-orange.size-lg {
-  @apply py-2;
-}
-.glorious-input-orange.size-md {
-  @apply py-1.5;
-}
-.glorious-input-orange.size-sm {
-  @apply py-1;
-}
-.glorious-input-orange.size-xs {
-  @apply py-0.5;
-}
-.glorious-input-orange:focus-visible {
-  @apply outline-none ring-2;
-}
-.glorious-input-orange:disabled {
-  @apply bg-orange-100;
-  @apply cursor-not-allowed;
-}
-
-.glorious-input-blue {
-  @apply ring-blue-500;
-  @apply rounded-md ring-1 bg-white;
-}
-.glorious-input-blue.size-xl {
-  @apply py-2.5;
-}
-.glorious-input-blue.size-lg {
-  @apply py-2;
-}
-.glorious-input-blue.size-md {
-  @apply py-1.5;
-}
-.glorious-input-blue.size-sm {
-  @apply py-1;
-}
-.glorious-input-blue.size-xs {
-  @apply py-0.5;
-}
-.glorious-input-blue:focus-visible {
-  @apply outline-none ring-2;
-}
-.glorious-input-blue:disabled {
-  @apply bg-blue-100;
-  @apply cursor-not-allowed;
-}
-
-.glorious-input-gray {
-  @apply ring-gray-500;
-  @apply rounded-md ring-1 bg-white;
-}
-.glorious-input-gray.size-xl {
-  @apply py-2.5;
-}
-.glorious-input-gray.size-lg {
-  @apply py-2;
-}
-.glorious-input-gray.size-md {
-  @apply py-1.5;
-}
-.glorious-input-gray.size-sm {
-  @apply py-1;
-}
-.glorious-input-gray.size-xs {
-  @apply py-0.5;
-}
-.glorious-input-gray:focus-visible {
-  @apply outline-none ring-2;
-}
-.glorious-input-gray:disabled {
-  @apply bg-gray-100;
-  @apply cursor-not-allowed;
-}
-
-.glorious-input-red {
-  @apply ring-red-500;
-  @apply rounded-md ring-1 bg-white;
-}
-.glorious-input-red.size-xl {
-  @apply py-2.5;
-}
-.glorious-input-red.size-lg {
-  @apply py-2;
-}
-.glorious-input-red.size-md {
-  @apply py-1.5;
-}
-.glorious-input-red.size-sm {
-  @apply py-1;
-}
-.glorious-input-red.size-xs {
-  @apply py-0.5;
-}
-.glorious-input-red:focus-visible {
-  @apply outline-none ring-2;
-}
-.glorious-input-red:disabled {
-  @apply bg-red-100;
-  @apply cursor-not-allowed;
-}
-
-.glorious-input-green {
-  @apply ring-green-500;
-  @apply rounded-md ring-1 bg-white;
-}
-.glorious-input-green.size-xl {
-  @apply py-2.5;
-}
-.glorious-input-green.size-lg {
-  @apply py-2;
-}
-.glorious-input-green.size-md {
-  @apply py-1.5;
-}
-.glorious-input-green.size-sm {
-  @apply py-1;
-}
-.glorious-input-green.size-xs {
-  @apply py-0.5;
-}
-.glorious-input-green:focus-visible {
-  @apply outline-none ring-2;
-}
-.glorious-input-green:disabled {
-  @apply bg-green-100;
-  @apply cursor-not-allowed;
-}
-
-.glorious-input {
-  @apply relative w-full;
-}
-.glorious-input.validation-error > div > input {
-  @apply ring-red-500 bg-red-50;
-}
-.glorious-input > input {
-  @apply w-full;
-}
-.glorious-input > input::placeholder {
-  @apply text-sm;
-}
-.glorious-input.icon-xl > input {
-  @apply rtl:pr-9 ltr:pl-9;
-}
-.glorious-input.icon-lg > input {
-  @apply rtl:pr-9 ltr:pl-8;
-}
-.glorious-input.icon-md > input {
-  @apply rtl:pr-9 ltr:pl-8;
-}
-.glorious-input.icon-sm > input {
-  @apply rtl:pr-8 ltr:pl-8;
-}
-.glorious-input.icon-xsm > input {
-  @apply rtl:pr-8 ltr:pl-7;
-}
-
-.glorious-input-icon {
-  @apply absolute h-max top-0 bottom-0 my-auto rtl:right-1 ltr:left-1;
-}
-
-/* ----------------------------------------------- TAG */
-.glorious-input-tag {
-  @apply mt-3 gap-2 flex flex-wrap;
-}
-.glorious-input-tag > div {
-  @apply bg-green-500 px-1 rounded text-white flex items-center gap-2 cursor-pointer break-all;
-}
-
-.glorious-input-options {
-  @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
-}
-.glorious-input-options > div > div {
-  @apply p-2 hover:bg-gray-100 cursor-pointer rounded break-words;
-}
-.glorious-input-options > div > div.disabled {
-  @apply cursor-not-allowed bg-gray-50;
-}
-.glorious-input div > input::placeholder {
-  @apply text-gray-500;
-}
-
-.glorious-input-tag-delete-option {
-  @apply border border-red-500 rounded p-1 hover:bg-red-50;
-}
-
-.glorious-loading {
-  aspect-ratio: 1;
-  border-radius: 50%;
-  animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
+.glorious-loading.size-lg {
+  @apply w-7;
 }
 
 @keyframes l20-1 {
@@ -797,661 +66,439 @@ button:focus-visible {
     transform: scaleY(-1) rotate(-135deg);
   }
 }
-html:has(.glorious-scaffold-modal.open) {
-  @apply overflow-hidden;
-}
-html:has(.glorious-scaffold-modal.open) div.glorious-input-options {
-  @apply md:!fixed !absolute;
+.validation-error-text {
+  @apply text-red-500 text-sm font-semibold;
+  display: inline-block;
+  animation: vibrateErrorTextLR 0.3s ease-in-out 1;
 }
 
-.glorious-scaffold-modal {
-  @apply fixed bg-white md:top-[15%] z-50 right-0 left-0 mx-auto md:rounded-md rounded-t-md md:bottom-0 bottom-0;
-}
-.glorious-scaffold-modal .close-modal-btn {
-  @apply flex justify-center items-center w-6 h-6;
-}
-.glorious-scaffold-modal-header {
-  @apply flex justify-between items-center px-3 pt-3;
-}
-.glorious-scaffold-modal-content {
-  @apply overflow-y-auto max-h-[50vh] px-3 pb-3;
-}
-.glorious-scaffold-modal-footer {
-  @apply flex justify-center gap-3 my-3;
-}
-.glorious-scaffold-modal-footer > button {
-  @apply min-w-24;
-}
-.glorious-scaffold-modal div.glorious-input-options {
-  @apply fixed;
-}
-.glorious-scaffold-modal-bg-blur {
-  @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 opacity-50 h-full w-full z-[40];
-}
-.glorious-scaffold-modal.size-full {
-  @apply w-full h-full top-0 rounded-none;
-}
-.glorious-scaffold-modal.size-xl {
-  @apply md:w-[70%] w-full md:h-max max-h-[calc(100%-15%)];
-}
-.glorious-scaffold-modal.size-lg {
-  @apply md:w-[60%] w-full md:h-max max-h-[calc(100%-15%)];
-}
-.glorious-scaffold-modal.size-md {
-  @apply md:w-[50%] w-full md:h-max max-h-[calc(100%-15%)];
-}
-.glorious-scaffold-modal.size-sm {
-  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[calc(100%-15%)];
-}
-.glorious-scaffold-modal.close {
-  @apply hidden;
-}
-.glorious-scaffold-modal.open.animation {
-  animation: animationMobile 0.3s normal forwards;
-}
-@screen md {
-  .glorious-scaffold-modal.open.animation {
-    animation: animationOpacity 0.3s normal forwards;
-  }
-}
-@keyframes animationOpacity {
+@keyframes vibrateErrorTextLR {
   0% {
-    transform: scale(0.1);
-    opacity: 0;
-  }
-  99% {
-    transform: scale(1);
-    opacity: 1;
+    transform: translateX(0);
   }
-  100% {
-    transform: unset;
-    opacity: 1;
+  25% {
+    transform: translateX(-5px);
   }
-}
-@keyframes animationMobile {
-  0% {
-    transform: translateY(100%);
+  50% {
+    transform: translateX(5px);
   }
-  99% {
-    transform: translateY(0);
+  75% {
+    transform: translateX(-5px);
   }
   100% {
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
-
-.glorious-paginate > div {
-  @apply border border-gray-50 rounded-xl h-8 flex items-center px-1 bg-white shadow-md gap-1 w-max;
-  direction: rtl;
-}
-.glorious-paginate > div > div {
-  @apply px-2;
-}
-.glorious-paginate > div > div:last-child {
-  @apply rotate-[180deg];
-}
-.glorious-paginate.color-orange .paginate.active {
-  @apply bg-orange-500;
-}
-.glorious-paginate.color-blue .paginate.active {
-  @apply bg-blue-500;
-}
-.glorious-paginate.color-gray .paginate.active {
-  @apply bg-gray-500;
+.glorious-checkbox {
+  @apply flex gap-2 items-center cursor-pointer;
 }
-.glorious-paginate.color-red .paginate.active {
-  @apply bg-red-500;
+.glorious-checkbox.size-md span {
+  @apply text-sm;
 }
-.glorious-paginate.color-green .paginate.active {
-  @apply bg-green-500;
+.glorious-checkbox.size-sm span {
+  @apply text-xs;
 }
-
-.paginate {
-  @apply text-[13px];
+.glorious-checkbox.disabled {
+  @apply cursor-not-allowed;
 }
-.paginate.active {
-  @apply bg-green-500 rounded-lg text-white font-bold text-[13px];
+.glorious-checkbox > label {
+  @apply block relative;
 }
-
-.glorious-radio {
-  @apply block relative cursor-pointer;
-}
-.glorious-radio > input {
+.glorious-checkbox > label > input {
   @apply hidden;
 }
-.glorious-radio > input:checked ~ div {
+.glorious-checkbox > label > input:checked ~ div {
   @apply border-none;
 }
-.glorious-radio > input:checked ~ div:after {
-  content: "";
-  @apply block w-1 h-1 bg-white rounded-full;
+.glorious-checkbox > label > input:checked ~ div:after {
+  @apply block h-max w-max;
 }
-.glorious-radio > input:disabled ~ div {
+.glorious-checkbox > label > input:disabled ~ div {
   @apply cursor-not-allowed;
 }
-.glorious-radio > div:last-child {
-  @apply border border-gray-500 rounded-full bg-white left-0 top-0 absolute hover:shadow-lg;
+.glorious-checkbox > label > input:hover ~ div {
+  @apply border-gray-400 shadow-md;
 }
-.glorious-radio > div:last-child > div:first-child {
+.glorious-checkbox > label > div:last-child {
+  @apply border border-gray-300 rounded bg-white left-0 top-0 absolute transition-[border] duration-200 ease-in-out;
+}
+.glorious-checkbox > label > div:last-child > div:first-child {
   @apply hidden;
 }
-.glorious-radio > div:last-child:after {
-  @apply absolute hidden right-0 top-0 left-0 bottom-0 m-auto w-10 h-10 bg-white rounded-full;
+.glorious-checkbox > label > div:last-child:after {
+  @apply absolute hidden top-1 right-0 left-0 bottom-0 m-auto;
 }
-.glorious-radio.orange > input:checked ~ div {
-  @apply bg-orange-500;
+.glorious-checkbox > label.color-primary > input:checked ~ div {
+  @apply bg-primary-500;
 }
-.glorious-radio.blue > input:checked ~ div {
-  @apply bg-blue-500;
+.glorious-checkbox > label.color-secondary > input:checked ~ div {
+  @apply bg-secondary-500;
 }
-.glorious-radio.gray > input:checked ~ div {
+.glorious-checkbox > label.color-sky > input:checked ~ div {
+  @apply bg-sky-500;
+}
+.glorious-checkbox > label.color-gray > input:checked ~ div {
   @apply bg-gray-500;
 }
-.glorious-radio.red > input:checked ~ div {
+.glorious-checkbox > label.color-red > input:checked ~ div {
   @apply bg-red-500;
 }
-.glorious-radio.green > input:checked ~ div {
-  @apply bg-green-500;
-}
-.glorious-radio.size-5xl {
-  @apply w-[40px] h-[40px];
-}
-.glorious-radio.size-5xl > div:last-child {
-  @apply w-[40px] h-[40px];
-}
-.glorious-radio.size-5xl > input:checked ~ div:after {
-  @apply w-[30px] h-[30px];
-}
-.glorious-radio.size-4xl {
-  @apply w-[36px] h-[36px];
-}
-.glorious-radio.size-4xl > div:last-child {
-  @apply w-[36px] h-[36px];
-}
-.glorious-radio.size-4xl > input:checked ~ div:after {
-  @apply w-[26px] h-[26px];
-}
-.glorious-radio.size-3xl {
-  @apply w-[32px] h-[32px];
-}
-.glorious-radio.size-3xl > div:last-child {
-  @apply w-[32px] h-[32px];
-}
-.glorious-radio.size-3xl > input:checked ~ div:after {
-  @apply w-[22px] h-[22px];
-}
-.glorious-radio.size-2xl {
-  @apply w-[28px] h-[28px];
-}
-.glorious-radio.size-2xl > div:last-child {
-  @apply w-[28px] h-[28px];
-}
-.glorious-radio.size-2xl > input:checked ~ div:after {
-  @apply w-[18px] h-[18px];
-}
-.glorious-radio.size-xl {
-  @apply w-[24px] h-[24px];
-}
-.glorious-radio.size-xl > div:last-child {
-  @apply w-[24px] h-[24px];
-}
-.glorious-radio.size-xl > input:checked ~ div:after {
-  @apply w-[14px] h-[14px];
-}
-.glorious-radio.size-lg {
-  @apply w-[18px] h-[18px];
-}
-.glorious-radio.size-lg > div:last-child {
-  @apply w-[18px] h-[18px];
+.glorious-checkbox > label.size-sm {
+  @apply w-4 h-4;
 }
-.glorious-radio.size-lg > input:checked ~ div:after {
-  @apply w-[8px] h-[8px];
+.glorious-checkbox > label.size-sm > div:last-child {
+  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIxNnB4IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTQwMC0zMDQgMjQwLTQ2NGw1Ni01NiAxMDQgMTA0IDI2NC0yNjQgNTYgNTYtMzIwIDMyMFoiLz48L3N2Zz4=);
+  @apply w-4 h-4;
 }
-.glorious-radio.size-md {
-  @apply w-[14px] h-[14px];
+.glorious-checkbox > label.size-md {
+  @apply w-5 h-5;
 }
-.glorious-radio.size-md > div:last-child {
-  @apply w-[14px] h-[14px];
+.glorious-checkbox > label.size-md > div:last-child {
+  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIxOHB4IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTQwMC0zMDQgMjQwLTQ2NGw1Ni01NiAxMDQgMTA0IDI2NC0yNjQgNTYgNTYtMzIwIDMyMFoiLz48L3N2Zz4=);
+  @apply w-5 h-5;
 }
-.glorious-radio.size-md > input:checked ~ div:after {
-  @apply w-[4px] h-[4px];
+.glorious-checkbox > label.size-lg {
+  @apply w-6 h-6;
 }
-.glorious-radio.size-sm {
-  @apply w-[10px] h-[10px];
-}
-.glorious-radio.size-sm > div:last-child {
-  @apply w-[10px] h-[10px];
-}
-.glorious-radio.size-sm > input:checked ~ div:after {
-  @apply w-[0px] h-[0px];
-}
-.glorious-radio.size-xs {
-  @apply w-[6px] h-[6px];
-}
-.glorious-radio.size-xs > div:last-child {
-  @apply w-[6px] h-[6px];
-}
-.glorious-radio.size-xs > input:checked ~ div:after {
-  @apply w-[-4px] h-[-4px];
-}
-
-.rating {
-  display: inline-block;
-}
-
-.rating input {
-  display: none;
-}
-
-.rating label {
-  float: right;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.rating label:before {
-  content: "★";
-  font-size: 30px;
-}
-
-.rating input:checked ~ label,
-.rating label:hover,
-.rating label:hover ~ label {
-  color: #ffd700 !important;
-  transition: color 0.3s;
-}
-
-label.checked {
-  color: #ffd700;
-}
-
-.xl.glorious-select {
-  @apply py-[0.657rem];
-}
-.lg.glorious-select {
-  @apply py-[0.532rem];
-}
-.md.glorious-select {
-  @apply py-[0.407rem];
-}
-.sm.glorious-select {
-  @apply py-[0.282rem];
-}
-.xsm.glorious-select {
-  @apply py-[0.157rem];
-}
-
-.glorious-select:focus-visible {
-  @apply outline-none ring-2;
-}
-
-.color-orange {
-  @apply ring-orange-500;
-}
-
-.color-blue {
-  @apply ring-blue-500;
+.glorious-checkbox > label.size-lg > div:last-child {
+  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjJweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMnB4IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTQwMC0zMDQgMjQwLTQ2NGw1Ni01NiAxMDQgMTA0IDI2NC0yNjQgNTYgNTYtMzIwIDMyMFoiLz48L3N2Zz4=);
+  @apply w-6 h-6;
 }
 
-.color-gray {
-  @apply ring-gray-500;
-}
-
-.color-red {
-  @apply ring-red-500;
-}
-
-.color-green {
-  @apply ring-green-500;
-}
-
-.glorious-select {
-  @apply rounded-md ring-1 px-3 text-gray-500 text-sm h-max;
-}
-.glorious-select:disabled {
-  @apply cursor-not-allowed;
-}
-.glorious-select.validation-error {
-  @apply ring-red-500 bg-red-50;
-}
-
-.switch {
-  direction: ltr;
-  --button-width: 3em;
-  --button-height: 1.5em;
-  --toggle-diameter: 1em;
-  --button-toggle-offset: calc(
-    (var(--button-height) - var(--toggle-diameter)) / 2
-  );
-  --toggle-shadow-offset: 10px;
-  --toggle-wider: 3em;
-}
-.switch-slider {
-  @apply bg-gray-300;
-  display: inline-block;
-  width: var(--button-width);
-  height: var(--button-height);
-  border-radius: calc(var(--button-height) / 2);
-  position: relative;
-  transition: 0.3s all ease-in-out;
-}
-.switch-slider::after {
-  content: "";
-  display: inline-block;
-  width: var(--toggle-diameter);
-  height: var(--toggle-diameter);
-  background-color: #fff;
-  border-radius: calc(var(--toggle-diameter) / 2);
-  position: absolute;
-  top: var(--button-toggle-offset);
-  transform: translateX(var(--button-toggle-offset));
-  box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
-  transition: 0.3s all ease-in-out;
-}
-.switch.color-orange input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.orange.500");
-}
-.switch.color-blue input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.blue.500");
-}
-.switch.color-gray input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.gray.500");
-}
-.switch.color-red input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.red.500");
-}
-.switch.color-green input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.green.500");
-}
-.switch input[type=checkbox]:checked + .switch-slider::after {
-  transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
-  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
-}
-.switch input[type=checkbox] {
-  display: none;
-}
-.switch input[type=checkbox]:active + .switch-slider::after {
-  width: var(--toggle-wider);
-}
-.switch input[type=checkbox]:checked:active + .switch-slider::after {
-  transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
-}
-
-.glorious-tab {
-  @apply flex justify-between bg-green-100 rounded-lg gap-3 w-max max-w-full shadow-md;
-}
-.glorious-tab div > div > button {
-  @apply text-gray-700 text-sm hover:bg-green-200 hover:text-gray-800 cursor-pointer px-2 py-1 rounded-lg whitespace-nowrap;
-}
-.glorious-tab div > div > button.active {
-  @apply font-bold text-white bg-green-700;
-}
-
-.glorious-table {
-  @apply overflow-x-auto;
-}
-.glorious-table.color-orange > table > thead {
-  @apply rounded-t-md overflow-hidden;
-}
-.glorious-table.color-orange > table > thead > tr > th:first-child {
-  @apply rtl:rounded-tr-lg ltr:rounded-tl-lg bg-orange-400;
+.glorious-button > button,
+.glorious-button a {
+  @apply rounded-lg text-white cursor-pointer px-3 flex gap-2 items-center transition-["background"] duration-300 ease-in-out;
 }
-.glorious-table.color-orange > table > thead > tr > th {
-  @apply bg-orange-400;
+.glorious-button > button.raised,
+.glorious-button a.raised {
+  @apply shadow-md;
 }
-.glorious-table.color-orange > table > thead > tr > th:last-child {
-  @apply rtl:rounded-tl-lg ltr:rounded-tr-lg bg-orange-400;
+.glorious-button > button.icon-left,
+.glorious-button a.icon-left {
+  @apply flex-row-reverse;
 }
-.glorious-table.color-orange > table > tbody > tr:nth-child(even) {
-  @apply bg-orange-50;
+.glorious-button > button.rounded,
+.glorious-button a.rounded {
+  @apply rounded-full;
 }
-.glorious-table.color-orange > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
+.glorious-button > button.size-sm,
+.glorious-button a.size-sm {
+  @apply py-1 text-sm;
 }
-.glorious-table.color-blue > table > thead {
-  @apply rounded-t-md overflow-hidden;
+.glorious-button > button.size-md,
+.glorious-button a.size-md {
+  @apply py-1.5 text-base;
 }
-.glorious-table.color-blue > table > thead > tr > th:first-child {
-  @apply rtl:rounded-tr-lg ltr:rounded-tl-lg bg-blue-400;
+.glorious-button > button.size-lg,
+.glorious-button a.size-lg {
+  @apply py-1.5 text-lg;
 }
-.glorious-table.color-blue > table > thead > tr > th {
-  @apply bg-blue-400;
+.glorious-button > button.color-primary:not(.outline),
+.glorious-button a.color-primary:not(.outline) {
+  @apply bg-primary-500;
 }
-.glorious-table.color-blue > table > thead > tr > th:last-child {
-  @apply rtl:rounded-tl-lg ltr:rounded-tr-lg bg-blue-400;
+.glorious-button > button.color-primary:not(.outline):hover,
+.glorious-button a.color-primary:not(.outline):hover {
+  @apply bg-primary-600;
 }
-.glorious-table.color-blue > table > tbody > tr:nth-child(even) {
-  @apply bg-blue-50;
+.glorious-button > button.color-primary:not(.outline):active,
+.glorious-button a.color-primary:not(.outline):active {
+  @apply bg-primary-700;
 }
-.glorious-table.color-blue > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
+.glorious-button > button:disabled.color-primary:not(.outline),
+.glorious-button a:disabled.color-primary:not(.outline) {
+  @apply bg-primary-200;
 }
-.glorious-table.color-gray > table > thead {
-  @apply rounded-t-md overflow-hidden;
+.glorious-button > button.color-primary.outline,
+.glorious-button a.color-primary.outline {
+  @apply outline;
+  @apply outline-primary-500;
+  @apply text-primary-500;
 }
-.glorious-table.color-gray > table > thead > tr > th:first-child {
-  @apply rtl:rounded-tr-lg ltr:rounded-tl-lg bg-gray-400;
+.glorious-button > button.color-primary.outline:hover,
+.glorious-button a.color-primary.outline:hover {
+  @apply bg-primary-100;
 }
-.glorious-table.color-gray > table > thead > tr > th {
-  @apply bg-gray-400;
+.glorious-button > button.color-primary.outline:active,
+.glorious-button a.color-primary.outline:active {
+  @apply bg-primary-200;
 }
-.glorious-table.color-gray > table > thead > tr > th:last-child {
-  @apply rtl:rounded-tl-lg ltr:rounded-tr-lg bg-gray-400;
+.glorious-button > button:disabled.color-primary.outline,
+.glorious-button a:disabled.color-primary.outline {
+  @apply bg-primary-100;
 }
-.glorious-table.color-gray > table > tbody > tr:nth-child(even) {
-  @apply bg-gray-50;
+.glorious-button > button.color-secondary:not(.outline),
+.glorious-button a.color-secondary:not(.outline) {
+  @apply bg-secondary-500;
 }
-.glorious-table.color-gray > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
+.glorious-button > button.color-secondary:not(.outline):hover,
+.glorious-button a.color-secondary:not(.outline):hover {
+  @apply bg-secondary-600;
 }
-.glorious-table.color-red > table > thead {
-  @apply rounded-t-md overflow-hidden;
+.glorious-button > button.color-secondary:not(.outline):active,
+.glorious-button a.color-secondary:not(.outline):active {
+  @apply bg-secondary-700;
 }
-.glorious-table.color-red > table > thead > tr > th:first-child {
-  @apply rtl:rounded-tr-lg ltr:rounded-tl-lg bg-red-400;
+.glorious-button > button:disabled.color-secondary:not(.outline),
+.glorious-button a:disabled.color-secondary:not(.outline) {
+  @apply bg-secondary-200;
 }
-.glorious-table.color-red > table > thead > tr > th {
-  @apply bg-red-400;
+.glorious-button > button.color-secondary.outline,
+.glorious-button a.color-secondary.outline {
+  @apply outline;
+  @apply outline-secondary-500;
+  @apply text-secondary-500;
 }
-.glorious-table.color-red > table > thead > tr > th:last-child {
-  @apply rtl:rounded-tl-lg ltr:rounded-tr-lg bg-red-400;
+.glorious-button > button.color-secondary.outline:hover,
+.glorious-button a.color-secondary.outline:hover {
+  @apply bg-secondary-100;
 }
-.glorious-table.color-red > table > tbody > tr:nth-child(even) {
-  @apply bg-red-50;
+.glorious-button > button.color-secondary.outline:active,
+.glorious-button a.color-secondary.outline:active {
+  @apply bg-secondary-200;
 }
-.glorious-table.color-red > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
-}
-.glorious-table.color-green > table > thead {
-  @apply rounded-t-md overflow-hidden;
-}
-.glorious-table.color-green > table > thead > tr > th:first-child {
-  @apply rtl:rounded-tr-lg ltr:rounded-tl-lg bg-green-400;
-}
-.glorious-table.color-green > table > thead > tr > th {
-  @apply bg-green-400;
-}
-.glorious-table.color-green > table > thead > tr > th:last-child {
-  @apply rtl:rounded-tl-lg ltr:rounded-tr-lg bg-green-400;
-}
-.glorious-table.color-green > table > tbody > tr:nth-child(even) {
-  @apply bg-green-50;
-}
-.glorious-table.color-green > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
+.glorious-button > button:disabled.color-secondary.outline,
+.glorious-button a:disabled.color-secondary.outline {
+  @apply bg-secondary-100;
+}
+.glorious-button > button.color-sky:not(.outline),
+.glorious-button a.color-sky:not(.outline) {
+  @apply bg-sky-500;
+}
+.glorious-button > button.color-sky:not(.outline):hover,
+.glorious-button a.color-sky:not(.outline):hover {
+  @apply bg-sky-600;
+}
+.glorious-button > button.color-sky:not(.outline):active,
+.glorious-button a.color-sky:not(.outline):active {
+  @apply bg-sky-700;
+}
+.glorious-button > button:disabled.color-sky:not(.outline),
+.glorious-button a:disabled.color-sky:not(.outline) {
+  @apply bg-sky-200;
+}
+.glorious-button > button.color-sky.outline,
+.glorious-button a.color-sky.outline {
+  @apply outline;
+  @apply outline-sky-500;
+  @apply text-sky-500;
+}
+.glorious-button > button.color-sky.outline:hover,
+.glorious-button a.color-sky.outline:hover {
+  @apply bg-sky-100;
+}
+.glorious-button > button.color-sky.outline:active,
+.glorious-button a.color-sky.outline:active {
+  @apply bg-sky-200;
+}
+.glorious-button > button:disabled.color-sky.outline,
+.glorious-button a:disabled.color-sky.outline {
+  @apply bg-sky-100;
+}
+.glorious-button > button.color-gray:not(.outline),
+.glorious-button a.color-gray:not(.outline) {
+  @apply bg-gray-500;
 }
-.glorious-table > table {
-  @apply w-full;
+.glorious-button > button.color-gray:not(.outline):hover,
+.glorious-button a.color-gray:not(.outline):hover {
+  @apply bg-gray-600;
 }
-.glorious-table > table > thead > tr > th {
-  @apply px-4 py-2 text-center;
+.glorious-button > button.color-gray:not(.outline):active,
+.glorious-button a.color-gray:not(.outline):active {
+  @apply bg-gray-700;
 }
-
-.glorious-textarea-orange {
-  @apply ring-orange-500;
-  @apply rounded-md ring-1 px-3;
+.glorious-button > button:disabled.color-gray:not(.outline),
+.glorious-button a:disabled.color-gray:not(.outline) {
+  @apply bg-gray-200;
 }
-.glorious-textarea-orange:focus-visible {
-  @apply outline-none ring-2;
-}
-.glorious-textarea-orange:disabled {
-  @apply bg-green-300 cursor-not-allowed;
+.glorious-button > button.color-gray.outline,
+.glorious-button a.color-gray.outline {
+  @apply outline;
+  @apply outline-gray-500;
+  @apply text-gray-500;
 }
-
-.glorious-textarea-blue {
-  @apply ring-blue-500;
-  @apply rounded-md ring-1 px-3;
+.glorious-button > button.color-gray.outline:hover,
+.glorious-button a.color-gray.outline:hover {
+  @apply bg-gray-100;
 }
-.glorious-textarea-blue:focus-visible {
-  @apply outline-none ring-2;
+.glorious-button > button.color-gray.outline:active,
+.glorious-button a.color-gray.outline:active {
+  @apply bg-gray-200;
 }
-.glorious-textarea-blue:disabled {
-  @apply bg-green-300 cursor-not-allowed;
+.glorious-button > button:disabled.color-gray.outline,
+.glorious-button a:disabled.color-gray.outline {
+  @apply bg-gray-100;
 }
-
-.glorious-textarea-gray {
-  @apply ring-gray-500;
-  @apply rounded-md ring-1 px-3;
+.glorious-button > button.color-red:not(.outline),
+.glorious-button a.color-red:not(.outline) {
+  @apply bg-red-500;
 }
-.glorious-textarea-gray:focus-visible {
-  @apply outline-none ring-2;
+.glorious-button > button.color-red:not(.outline):hover,
+.glorious-button a.color-red:not(.outline):hover {
+  @apply bg-red-600;
 }
-.glorious-textarea-gray:disabled {
-  @apply bg-green-300 cursor-not-allowed;
+.glorious-button > button.color-red:not(.outline):active,
+.glorious-button a.color-red:not(.outline):active {
+  @apply bg-red-700;
 }
-
-.glorious-textarea-red {
-  @apply ring-red-500;
-  @apply rounded-md ring-1 px-3;
+.glorious-button > button:disabled.color-red:not(.outline),
+.glorious-button a:disabled.color-red:not(.outline) {
+  @apply bg-red-200;
 }
-.glorious-textarea-red:focus-visible {
-  @apply outline-none ring-2;
+.glorious-button > button.color-red.outline,
+.glorious-button a.color-red.outline {
+  @apply outline;
+  @apply outline-red-500;
+  @apply text-red-500;
 }
-.glorious-textarea-red:disabled {
-  @apply bg-green-300 cursor-not-allowed;
+.glorious-button > button.color-red.outline:hover,
+.glorious-button a.color-red.outline:hover {
+  @apply bg-red-100;
 }
-
-.glorious-textarea-green {
-  @apply ring-green-500;
-  @apply rounded-md ring-1 px-3;
+.glorious-button > button.color-red.outline:active,
+.glorious-button a.color-red.outline:active {
+  @apply bg-red-200;
 }
-.glorious-textarea-green:focus-visible {
-  @apply outline-none ring-2;
+.glorious-button > button:disabled.color-red.outline,
+.glorious-button a:disabled.color-red.outline {
+  @apply bg-red-100;
 }
-.glorious-textarea-green:disabled {
-  @apply bg-green-300 cursor-not-allowed;
+.glorious-button > button:disabled,
+.glorious-button a:disabled {
+  @apply cursor-not-allowed;
 }
 
-.glorious-textarea {
-  @apply relative w-full flex flex-col;
-}
-.glorious-textarea > textarea {
-  @apply w-full p-2;
-}
-.glorious-textarea > textarea.validation-error {
-  @apply ring-red-500 bg-red-50;
+.glorious-input {
+  @apply flex flex-col gap-0.5 relative;
 }
-.glorious-textarea > textarea::placeholder {
-  @apply text-[14px];
+.glorious-input > .title {
+  @apply text-base;
 }
-
-.glorious-timeline-items {
+.glorious-input > div.input-content {
   @apply relative;
 }
-.glorious-timeline-items div {
-  @apply relative;
+.glorious-input > div.input-content > input {
+  @apply rounded-lg px-3;
 }
-.glorious-timeline-items div::before {
-  content: "";
-  @apply absolute w-[2px] right-[-15px];
+.glorious-input > div.input-content > input.size-sm {
+  @apply py-0.25;
 }
-.glorious-timeline-items div::before:not(:last-child) {
-  @apply h-[calc(100%+20px)];
+.glorious-input > div.input-content > input.size-md {
+  @apply py-1.25;
 }
-.glorious-timeline-items-count {
-  @apply absolute w-5 h-5 top-0 right-[-24px] rounded-full;
-  @apply text-white flex justify-center items-center font-medium;
+.glorious-input > div.input-content > input.size-lg {
+  @apply py-1.75;
 }
-.glorious-timeline-items.color-orange > div::before {
-  @apply bg-orange-500;
+.glorious-input > div.input-content > input:disabled {
+  @apply cursor-not-allowed bg-gray-200;
 }
-.glorious-timeline-items.color-blue > div::before {
-  @apply bg-blue-500;
+.glorious-input > div.input-content > input:hover.color-primary {
+  @apply border-primary-600;
+  @apply shadow;
 }
-.glorious-timeline-items.color-gray > div::before {
-  @apply bg-gray-500;
+.glorious-input > div.input-content > input:hover.color-secondary {
+  @apply border-secondary-600;
+  @apply shadow;
 }
-.glorious-timeline-items.color-red > div::before {
-  @apply bg-red-500;
+.glorious-input > div.input-content > input:hover.color-sky {
+  @apply border-sky-600;
+  @apply shadow;
 }
-.glorious-timeline-items.color-green > div::before {
-  @apply bg-green-500;
+.glorious-input > div.input-content > input:hover.color-gray {
+  @apply border-gray-600;
+  @apply shadow;
 }
-.glorious-timeline-items.color-orange .glorious-timeline-items-count {
-  @apply bg-orange-500;
+.glorious-input > div.input-content > input:hover.color-red {
+  @apply border-red-600;
+  @apply shadow;
 }
-.glorious-timeline-items.color-blue .glorious-timeline-items-count {
-  @apply bg-blue-500;
+.glorious-input > div.input-content > input:focus.color-primary {
+  @apply outline-primary-500;
 }
-.glorious-timeline-items.color-gray .glorious-timeline-items-count {
-  @apply bg-gray-500;
+.glorious-input > div.input-content > input:focus.color-secondary {
+  @apply outline-secondary-500;
 }
-.glorious-timeline-items.color-red .glorious-timeline-items-count {
-  @apply bg-red-500;
+.glorious-input > div.input-content > input:focus.color-sky {
+  @apply outline-sky-500;
 }
-.glorious-timeline-items.color-green .glorious-timeline-items-count {
-  @apply bg-green-500;
+.glorious-input > div.input-content > input:focus.color-gray {
+  @apply outline-gray-500;
 }
-
-.glorious-tooltip {
-  @apply relative w-max;
+.glorious-input > div.input-content > input:focus.color-red {
+  @apply outline-red-500;
 }
-.glorious-tooltip .tooltip-slot:hover + .tooltip-content {
-  opacity: 1;
-  display: inline;
-  animation: anim-glorious-tooltip 500ms backwards;
+.glorious-input > div.input-content > input.color-primary {
+  @apply border;
+  @apply border-primary-500;
 }
-.glorious-tooltip > .tooltip-content {
-  @apply bg-white w-max rounded-lg shadow-md pt-2 px-3 flex absolute bottom-10 right-0 left-0 mx-auto;
-  display: none;
-  opacity: 0;
+.glorious-input > div.input-content > input.color-secondary {
+  @apply border;
+  @apply border-secondary-500;
 }
-
-@keyframes anim-glorious-tooltip {
-  0% {
-    opacity: 0;
-    display: none;
-  }
-  1% {
-    display: inline-block !important;
-  }
-  100% {
-    opacity: 1 !important;
-    display: inline-block !important;
-  }
+.glorious-input > div.input-content > input.color-sky {
+  @apply border;
+  @apply border-sky-500;
 }
-.validation-error-text {
-  display: inline-block;
-  animation: vibrateErrorTextLR 0.3s ease-in-out 1;
+.glorious-input > div.input-content > input.color-gray {
+  @apply border;
+  @apply border-gray-500;
 }
-
-@keyframes vibrateErrorTextLR {
-  0% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-5px);
-  }
-  50% {
-    transform: translateX(5px);
-  }
-  75% {
-    transform: translateX(-5px);
-  }
-  100% {
-    transform: translateX(0);
-  }
+.glorious-input > div.input-content > input.color-red {
+  @apply border;
+  @apply border-red-500;
+}
+.glorious-input > div.input-content > input.error {
+  @apply border-red-500;
 }
-.glorious-backdrop {
-  @apply backdrop-blur-md fixed top-0 w-full h-full bg-gray-500/50 z-40;
+.glorious-input > div.input-content > .icon {
+  @apply absolute top-0 bottom-0 my-auto h-max px-3 cursor-pointer;
+}
+.glorious-input > div.input-content > .icon.icon-left {
+  @apply left-0;
+}
+.glorious-input > div.input-content > .icon.icon-left + input.size-sm {
+  @apply pl-7.5;
+}
+.glorious-input > div.input-content > .icon.icon-left + input.size-md {
+  @apply pl-9;
+}
+.glorious-input > div.input-content > .icon.icon-left + input.size-lg {
+  @apply pl-8.5;
+}
+.glorious-input > div.input-content > .icon.icon-right {
+  @apply right-0;
+}
+.glorious-input > div.input-content > .icon.icon-right + input.size-sm {
+  @apply pr-7.5;
+}
+.glorious-input > div.input-content > .icon.icon-right + input.size-md {
+  @apply pr-9;
+}
+.glorious-input > div.input-content > .icon.icon-right + input.size-lg {
+  @apply pr-8.5;
+}
+
+@theme {
+  --color-primary-50: #f2fbf3;
+  --color-primary-100: #e1f7e4;
+  --color-primary-200: #c4eeca;
+  --color-primary-300: #96dfa1;
+  --color-primary-400: #61c770;
+  --color-primary-500: #38a248;
+  --color-primary-600: #2c8d3b;
+  --color-primary-700: #266f31;
+  --color-primary-800: #22592b;
+  --color-primary-900: #1e4926;
+  --color-primary-950: #0b2811;
+  --color-secondary-50: #f2f9f9;
+  --color-secondary-100: #ddeef0;
+  --color-secondary-200: #bedee3;
+  --color-secondary-300: #91c6cf;
+  --color-secondary-400: #5da5b3;
+  --color-secondary-500: #4896a7;
+  --color-secondary-600: #397181;
+  --color-secondary-700: #345d6a;
+  --color-secondary-800: #314f59;
+  --color-secondary-900: #2c434d;
+  --color-secondary-950: #192a33;
 }