.y-u-color-primary {
  color: var(--y-color-primary);
}
.y-u-color-secondary {
  color: var(--y-color-secondary);
}
.y-u-color-muted {
  color: var(--y-color-muted);
}
.y-u-color-text {
  color: var(--y-color-text);
}
.y-u-color-bg {
  color: var(--y-color-bg);
}
.y-u-color-s-bg {
  color: var(--y-color-s-bg);
}
.y-u-color-fg {
  color: var(--y-color-fg);
}
.y-u-color-i {
  color: var(--y-color-i);
}
.y-u-color-surface {
  color: var(--y-color-surface);
}
.y-u-color-border {
  color: var(--y-color-border);
}
.y-u-color-primary-contrast {
  color: var(--y-color-primary-contrast);
}
.y-u-color-accent {
  color: var(--y-color-accent);
}
.y-u-color-danger {
  color: var(--y-color-danger);
}
.y-u-color-warning {
  color: var(--y-color-warning);
}
.y-u-color-success {
  color: var(--y-color-success);
}

.y-l-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--y-space-16);
}
.y-border-transparency {
  border-color: transparent;
}

.y-u-block {
  display: block;
}
.y-u-inline {
  display: inline;
}
.y-u-inline-block {
  display: inline-block;
}
.y-u-flex {
  display: flex;
}
.y-u-inline-flex {
  display: inline-flex;
}
.y-u-grid {
  display: grid;
}
.y-u-hidden {
  display: none !important;
}

.y-u-items-start {
  align-items: flex-start;
}
.y-u-items-center {
  align-items: center;
}
.y-u-items-end {
  align-items: flex-end;
}
.y-u-justify-start {
  justify-content: flex-start;
}
.y-u-justify-center {
  justify-content: center;
}
.y-u-justify-between {
  justify-content: space-between;
}
.y-u-justify-end {
  justify-content: flex-end;
}
.y-u-flex-col {
  flex-direction: column;
}
.y-u-flex-row {
  flex-direction: row;
}
.y-u-flex-wrap {
  flex-wrap: wrap;
}
.y-u-gap-4 {
  gap: var(--y-space-4);
}
.y-u-gap-8 {
  gap: var(--y-space-8);
}
.y-u-gap-12 {
  gap: var(--y-space-12);
}
.y-u-gap-16 {
  gap: var(--y-space-16);
}
.y-u-gap-24 {
  gap: var(--y-space-24);
}
.y-u-gap-32 {
  gap: var(--y-space-32);
}
.y-u-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.y-u-container-l {
  max-width: 1400px;
}
.y-u-container-m {
  max-width: 1200px;
}
.y-u-container-s {
  max-width: 390px;
}

.y-u-grid-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.y-u-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.y-u-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.y-u-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.y-u-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.y-u-grid-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.y-u-grid-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.y-u-grid-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.y-u-grid-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.y-u-grid-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.y-u-grid-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.y-u-grid-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.y-u-grid-auto-200 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.y-u-grid-auto-240 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.y-u-grid-auto-300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.y-u-grid-auto-320 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.y-u-grid-flow-row {
  grid-auto-flow: row;
}
.y-u-grid-flow-col {
  grid-auto-flow: column;
}
.y-u-grid-flow-dense {
  grid-auto-flow: dense;
}

.y-u-place-items-start {
  place-items: start;
}
.y-u-place-items-center {
  place-items: center;
}
.y-u-place-items-end {
  place-items: end;
}
.y-u-place-content-start {
  place-content: start;
}
.y-u-place-content-center {
  place-content: center;
}
.y-u-place-content-between {
  place-content: space-between;
}
.y-u-place-content-end {
  place-content: end;
}

.y-u-col-gap-8 {
  column-gap: var(--y-space-8);
}
.y-u-col-gap-12 {
  column-gap: var(--y-space-12);
}
.y-u-col-gap-16 {
  column-gap: var(--y-space-16);
}
.y-u-col-gap-24 {
  column-gap: var(--y-space-24);
}
.y-u-col-gap-32 {
  column-gap: var(--y-space-32);
}
.y-u-row-gap-8 {
  row-gap: var(--y-space-8);
}
.y-u-row-gap-12 {
  row-gap: var(--y-space-12);
}
.y-u-row-gap-16 {
  row-gap: var(--y-space-16);
}
.y-u-row-gap-24 {
  row-gap: var(--y-space-24);
}
.y-u-row-gap-32 {
  row-gap: var(--y-space-32);
}

.y-u-col-span-1 {
  grid-column: span 1 / span 1;
}
.y-u-col-span-2 {
  grid-column: span 2 / span 2;
}
.y-u-col-span-3 {
  grid-column: span 3 / span 3;
}
.y-u-col-span-4 {
  grid-column: span 4 / span 4;
}
.y-u-col-span-5 {
  grid-column: span 5 / span 5;
}
.y-u-col-span-6 {
  grid-column: span 6 / span 6;
}
.y-u-col-span-7 {
  grid-column: span 7 / span 7;
}
.y-u-col-span-8 {
  grid-column: span 8 / span 8;
}
.y-u-col-span-9 {
  grid-column: span 9 / span 9;
}
.y-u-col-span-10 {
  grid-column: span 10 / span 10;
}
.y-u-col-span-11 {
  grid-column: span 11 / span 11;
}
.y-u-col-span-12 {
  grid-column: span 12 / span 12;
}
.y-u-col-span-full {
  grid-column: 1 / -1;
}

.y-u-row-span-1 {
  grid-row: span 1 / span 1;
}
.y-u-row-span-2 {
  grid-row: span 2 / span 2;
}
.y-u-row-span-3 {
  grid-row: span 3 / span 3;
}
.y-u-row-span-4 {
  grid-row: span 4 / span 4;
}
.y-u-row-span-5 {
  grid-row: span 5 / span 5;
}
.y-u-row-span-6 {
  grid-row: span 6 / span 6;
}
.y-u-row-span-full {
  grid-row: 1 / -1;
}

.y-u-relative {
  position: relative;
}
.y-u-absolute {
  position: absolute;
}
.y-u-fixed {
  position: fixed;
}
.y-u-sticky {
  position: sticky;
}

.y-u-inset-0 {
  inset: 0;
}
.y-u-inset-x-0 {
  left: 0;
  right: 0;
}
.y-u-inset-y-0 {
  top: 0;
  bottom: 0;
}
.y-u-top-0 {
  top: 0;
}
.y-u-right-0 {
  right: 0;
}
.y-u-bottom-0 {
  bottom: 0;
}
.y-u-left-0 {
  left: 0;
}

.y-u-top-left {
  top: 0;
  left: 0;
}
.y-u-top-right {
  top: 0;
  right: 0;
}
.y-u-bottom-left {
  bottom: 0;
  left: 0;
}
.y-u-bottom-right {
  bottom: 0;
  right: 0;
}

.y-u-absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.y-u-z-1 {
  z-index: 1;
}
.y-u-z-10 {
  z-index: 10;
}
.y-u-z-50 {
  z-index: 50;
}
.y-u-z-100 {
  z-index: 100;
}

[class*="y-u-p-"] {
  box-sizing: border-box;
}
.y-u-p-0 {
  padding: var(--y-space-0);
}
.y-u-p-8 {
  padding: var(--y-space-8);
}
.y-u-p-12 {
  padding: var(--y-space-12);
}
.y-u-p-16 {
  padding: var(--y-space-16);
}
.y-u-p-24 {
  padding: var(--y-space-24);
}
.y-u-p-32 {
  padding: var(--y-space-32);
}

.y-u-px-8 {
  padding-inline: var(--y-space-8);
}
.y-u-px-16 {
  padding-inline: var(--y-space-16);
}
.y-u-px-24 {
  padding-inline: var(--y-space-24);
}
.y-u-py-8 {
  padding-block: var(--y-space-8);
}
.y-u-py-12 {
  padding-block: var(--y-space-12);
}
.y-u-py-16 {
  padding-block: var(--y-space-16);
}
.y-u-py-24 {
  padding-block: var(--y-space-24);
}

.y-u-m-0 {
  margin: var(--y-space-0);
}
.y-u-m-8 {
  margin: var(--y-space-8);
}
.y-u-m-12 {
  margin: var(--y-space-12);
}
.y-u-m-16 {
  margin: var(--y-space-16);
}
.y-u-m-24 {
  margin: var(--y-space-24);
}
.y-u-m-32 {
  margin: var(--y-space-32);
}

.y-u-mx-auto {
  margin-inline: auto;
}
.y-u-mx-8 {
  margin-inline: var(--y-space-8);
}
.y-u-mx-16 {
  margin-inline: var(--y-space-16);
}
.y-u-my-8 {
  margin-block: var(--y-space-8);
}
.y-u-my-16 {
  margin-block: var(--y-space-16);
}

.y-u-m-b-0 {
  margin-bottom: var(--y-space-0);
}
.y-u-m-b-4 {
  margin-bottom: var(--y-space-4);
}
.y-u-m-b-8 {
  margin-bottom: var(--y-space-8);
}
.y-u-m-b-16 {
  margin-bottom: var(--y-space-16);
}
.y-u-m-b-24 {
  margin-bottom: var(--y-space-24);
}
.y-u-m-t-4 {
  margin-top: var(--y-space-4);
}
.y-u-m-t-8 {
  margin-top: var(--y-space-8);
}
.y-u-m-t-16 {
  margin-top: var(--y-space-16);
}
.y-u-m-t-24 {
  margin-top: var(--y-space-24);
}

.y-u-m-l-4 {
  margin-left: var(--y-space-4);
}
.y-u-m-l-8 {
  margin-left: var(--y-space-8);
}
.y-u-m-l-16 {
  margin-left: var(--y-space-16);
}
.y-u-m-l-24 {
  margin-left: var(--y-space-24);
}
.y-u-m-r-4 {
  margin-right: var(--y-space-4);
}
.y-u-m-r-8 {
  margin-right: var(--y-space-8);
}
.y-u-m-r-16 {
  margin-right: var(--y-space-16);
}
.y-u-m-r-24 {
  margin-right: var(--y-space-24);
}
.y-u-px-4 {
  padding-inline: var(--y-space-4);
}
.y-u-px-8 {
  padding-inline: var(--y-space-8);
}
.y-u-px-16 {
  padding-inline: var(--y-space-16);
}
.y-u-px-24 {
  padding-inline: var(--y-space-24);
}
.y-u-px-32 {
  padding-inline: var(--y-space-32);
}
.y-u-py-4 {
  padding-block: var(--y-space-4);
}
.y-u-py-8 {
  padding-block: var(--y-space-8);
}
.y-u-py-16 {
  padding-block: var(--y-space-16);
}
.y-u-py-24 {
  padding-block: var(--y-space-24);
}
.y-u-py-32 {
  padding-block: var(--y-space-32);
}
.y-u-p-y-56 {
  padding-block: var(--y-space-56);
}
.y-u-p-t-0 {
  padding-top: var(--y-space-0);
}
.y-u-p-t-4 {
  padding-top: var(--y-space-4);
}
.y-u-p-t-8 {
  padding-top: var(--y-space-8);
}
.y-u-p-t-16 {
  padding-top: var(--y-space-16);
}
.y-u-p-t-24 {
  padding-top: var(--y-space-24);
}
.y-u-p-t-32 {
  padding-top: var(--y-space-32);
}
.y-u-p-b-4 {
  padding-bottom: var(--y-space-4);
}
.y-u-p-b-8 {
  padding-bottom: var(--y-space-8);
}
.y-u-p-b-16 {
  padding-bottom: var(--y-space-16);
}
.y-u-p-b-24 {
  padding-bottom: var(--y-space-24);
}
.y-u-p-b-32 {
  padding-bottom: var(--y-space-32);
}
.y-u-p-l-4 {
  padding-left: var(--y-space-4);
}
.y-u-p-l-8 {
  padding-left: var(--y-space-8);
}
.y-u-p-l-16 {
  padding-left: var(--y-space-16);
}
.y-u-p-l-24 {
  padding-left: var(--y-space-24);
}
.y-u-p-l-32 {
  padding-left: var(--y-space-32);
}
.y-u-p-r-4 {
  padding-right: var(--y-space-4);
}
.y-u-p-r-8 {
  padding-right: var(--y-space-8);
}
.y-u-p-r-16 {
  padding-right: var(--y-space-16);
}
.y-u-p-r-24 {
  padding-right: var(--y-space-24);
}
.y-u-p-r-32 {
  padding-right: var(--y-space-32);
}

.y-u-border {
  border: 1px solid var(--y-color-border);
}
.y-u-rounded-4 {
  border-radius: var(--y-radius-4);
}
.y-u-rounded-8 {
  border-radius: var(--y-radius-8);
}
.y-u-rounded-12 {
  border-radius: var(--y-radius-12);
}
.y-u-rounded-full {
  border-radius: var(--y-radius-full);
}

.y-u-shadow-xs {
  box-shadow: var(--y-shadow-xs);
}
.y-u-shadow-sm {
  box-shadow: var(--y-shadow-sm);
}
.y-u-shadow-md {
  box-shadow: var(--y-shadow-md);
}
.y-u-shadow-lg {
  box-shadow: var(--y-shadow-lg);
}

.y-u-text-center {
  text-align: center;
}
.y-u-text-start {
  text-align: start;
}
.y-u-text-end {
  text-align: end;
}
.y-u-text-muted {
  color: var(--y-color-muted);
}
.y-u-text-primary {
  color: var(--y-color-primary);
}

.y-u-surface {
  background: var(--y-color-surface);
  border: 1px solid var(--y-color-border);
}
.y-u-bg-primary {
  background: var(--y-color-primary);
}
.y-u-bg-secondary {
  background: var(--y-color-secondary);
}
.y-u-bg-bg {
  background: var(--y-color-bg);
}
.y-u-bg-fg {
  background: var(--y-color-fg);
}

.y-u-bg-muted {
  background: var(--y-color-muted);
}
.y-u-bg-i {
  background: var(--y-color-i);
}

.y-u-bg-surface {
  background: var(--y-color-surface);
}
.y-u-bg-border {
  background: var(--y-color-border);
}

.y-u-bg-primary-contrast {
  background: var(--y-color-primary-contrast);
}
.y-u-bg-accent {
  background: var(--y-color-accent);
}

.y-u-w-full {
  width: 100%;
}
.y-u-h-full {
  height: 100%;
}
.y-u-min-h-full {
  min-height: 100%;
}
.y-u-max-w-600 {
  max-width: 600px;
}
.y-u-max-w-1200 {
  max-width: 1200px;
}
.y-u-min-w-full {
  min-width: 100%;
}
.y-u-max-w-fit {
  max-width: fit-content;
}

.y-u-max-w-full {
  max-width: 100%;
}

.y-u-overflow-hidden {
  overflow: hidden;
}
.y-u-overflow-x-hidden {
  overflow-x: hidden;
}
.y-u-overflow-y-hidden {
  overflow-y: hidden;
}
.y-u-overflow-x-auto {
  overflow-x: auto;
}
.y-u-overflow-y-auto {
  overflow-y: auto;
}
.y-u-overflow-x-scroll {
  overflow-x: scroll;
}
.y-u-overflow-y-scroll {
  overflow-y: scroll;
}
.y-u-overflow-x-visible {
  overflow-x: visible;
}
.y-u-overflow-y-visible {
  overflow-y: visible;
}

.y-u-text-center {
  text-align: center;
}
.active-icon {
  border-bottom: 4px solid var(--y-color-primary);
}