@nulllogic/scssleon 1.0.1

package/dist/css/scssleon.css

@@ -0,0 +1,1830 @@
+@charset "UTF-8";
+/*
+ * ------------------------------------------------------------------
+ * ███████╗ ██████╗ ██████╗███████╗██╗     ███████╗ ██████╗ ███╗   ██╗
+ * ██╔════╝██╔════╝██╔════╝██╔════╝██║     ██╔════╝██╔═══██╗████╗  ██║
+ * ███████╗██║     ██║     ███████╗██║     █████╗  ██║   ██║██╔██╗ ██║
+ * ╚════██║██║     ██║     ╚════██║██║     ██╔══╝  ██║   ██║██║╚██╗██║
+ * ███████║╚██████╗╚██████╗███████║███████╗███████╗╚██████╔╝██║ ╚████║
+ * ╚══════╝ ╚═════╝ ╚═════╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝  ╚═══╝
+ *
+ * SCSSLEON v1.0.0 (https://nulllogic.github.io/scssleon/)
+ * Copyright 2011-2024 NullLogic
+ * Licensed under MIT (https://nulllogic.github.io/scssleon/blob/main/LICENSE)
+ * ------------------------------------------------------------------
+ */
+/*
+-------------------------------------------------------
+Main configuration - initial configuration requirement
+-------------------------------------------------------
+*/
+/*
+┌─┐┌─┐┌┐┌┌─┐┬┌─┐
+│  │ ││││├┤ ││ ┬
+└─┘└─┘┘└┘└  ┴└─┘
+*/
+/* Override default settings in the theme | @example */
+/* Main configuration END
+-------------------------------------------------------*/
+/* ------------------------------------------------------------------
+ * Loading modules - this is default configuration with all modules enabled
+ */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+:root {
+  --xii-root-font-family-default: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --xii-root-font-family-monospace: ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+:root {
+  color-scheme: light dark;
+}
+
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┬─┐┌─┐┌─┐┌─┐┌┬┐
+├┬┘├┤ └─┐├┤  │
+┴└─└─┘└─┘└─┘ ┴
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+  text-decoration-skip-ink: none;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin: 0;
+}
+
+sub,
+sup {
+  position: relative;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin: 0;
+  overflow: auto;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  border-radius: 0.25rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: inherit;
+}
+
+figure {
+  margin: 0;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  text-align: left;
+}
+
+th {
+  font-weight: inherit;
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  line-height: inherit;
+}
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌┐ ┌─┐┌─┐┌─┐
+├┴┐├─┤└─┐├┤ 
+└─┘┴ ┴└─┘└─┘
+*/
+body {
+  margin: 0;
+  -webkit-text-size-adjust: 100%;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1;
+  font-family: var(--xii-root-font-family-default);
+  color: var(--xii-body-color);
+  background: var(--xii-body-background);
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+}
+@media (prefers-color-scheme: light) {
+  body {
+    --xii-body-background: "#fff";
+    --xii-body-color: "#ccc";
+  }
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    --xii-body-background: rgb(18, 20, 23);
+    --xii-body-color: "#ccc";
+  }
+}
+
+a {
+  text-decoration: underline;
+  color: var(--xii-a-a-color);
+}
+@media (prefers-color-scheme: light) {
+  a {
+    --xii-a-color: "#ccc";
+  }
+}
+@media (prefers-color-scheme: dark) {
+  a {
+    --xii-a-color: "#ccc";
+  }
+}
+a[target=_blank]:after {
+  background: red;
+  display: inline-flex;
+  width: 12px;
+  height: 12px;
+  content: "";
+}
+
+ol {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+dl {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+img {
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+}
+
+p {
+  margin: 0;
+}
+
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌─┐┌─┐┌┐┌┌┬┐┌─┐┌┐┌┌┬┐
+│  │ ││││ │ ├┤ │││ │
+└─┘└─┘┘└┘ ┴ └─┘┘└┘ ┴
+*/
+.content h1 {
+  font-size: 3.5rem;
+  line-height: inherit;
+  font-weight: 500;
+  margin: 0;
+  padding: 0 0 15px 0;
+}
+.content h2 {
+  font-size: 2.8rem;
+  line-height: inherit;
+  font-weight: 500;
+  margin: 0;
+  padding: 0 0 15px 0;
+}
+.content h3 {
+  font-size: 2.4rem;
+  line-height: inherit;
+  font-weight: 500;
+  margin: 0;
+  padding: 0 0 15px 0;
+}
+.content h4 {
+  font-size: 2rem;
+  line-height: inherit;
+  font-weight: 500;
+  margin: 0;
+  padding: 0 0 15px 0;
+}
+.content h5 {
+  font-size: 1.8rem;
+  line-height: inherit;
+  font-weight: 500;
+  margin: 0;
+  padding: 0 0 15px 0;
+}
+.content h6 {
+  font-size: 1.625rem;
+  line-height: inherit;
+  font-weight: 500;
+  margin: 0;
+  padding: 0 0 15px 0;
+}
+.content p {
+  margin: 0;
+  padding: 0 0 15px 0;
+}
+.content abbr {
+  attributes: (title: ());
+}
+.content address {
+  margin: 0;
+  font-size: 1rem;
+  line-height: inherit;
+}
+.content ol {
+  margin-bottom: 15px;
+}
+.content ul {
+  margin-bottom: 15px;
+}
+.content dl {
+  margin-bottom: 15px;
+}
+.content dt {
+  font-weight: normal;
+}
+.content dd {
+  margin: 0 0 0.5rem 0;
+  padding: 0;
+}
+.content b {
+  font-weight: bold;
+}
+.content strong {
+  font-weight: bold;
+}
+.content small {
+  font-size: 0.825rem;
+}
+.content mark {
+  padding: 0.1875em;
+}
+.content sub {
+  bottom: 0.25em;
+}
+.content sup {
+  top: -0.5em;
+}
+.content details {
+  margin-bottom: 15px;
+}
+.content pre {
+  font-family: var(--xii-root-font-family-monospace);
+}
+.content code {
+  color: var(--xii-code-color);
+  background: var(--xii-code-background);
+  padding: 0 5px;
+}
+@media (prefers-color-scheme: light) {
+  .content code {
+    --xii-code-background: "#fff";
+    --xii-code-color: "#ccc";
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .content code {
+    --xii-code-background: rgb(38, 69, 116);
+    --xii-code-color: "#fff";
+  }
+}
+.content figure {
+  margin: 0 0 15px 0;
+}
+.content img {
+  margin: 0 0 15px 0;
+}
+.content svg {
+  vertical-align: middle;
+}
+.content iframe {
+  margin: 0 0 15px 0;
+}
+.content embed {
+  margin: 0 0 15px 0;
+}
+.content object {
+  margin: 0 0 15px 0;
+}
+.content progress {
+  vertical-align: baseline;
+}
+.content label {
+  display: inline-block;
+}
+.content select {
+  word-wrap: normal;
+}
+.content hr {
+  margin: 15px 0;
+  border: 0;
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: var(--xii-hr-border-top-color);
+}
+@media (prefers-color-scheme: light) {
+  .content hr {
+    --xii-hr-border-top-color: #ccc;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .content hr {
+    --xii-hr-border-top-color: #555;
+  }
+}
+
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/**
+┌─┐┌─┐┌┐┌┌┬┐┌─┐┬┌┐┌┌─┐┬─┐
+│  │ ││││ │ ├─┤││││├┤ ├┬┘
+└─┘└─┘┘└┘ ┴ ┴ ┴┴┘└┘└─┘┴└─
+**/
+@media (min-width: 540px) {
+  .container.sm {
+    max-width: 540px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 720px) {
+  .container.md {
+    max-width: 720px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 960px) {
+  .container.lg {
+    max-width: 960px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 1140px) {
+  .container.xl {
+    max-width: 1140px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 1320px) {
+  .container.xxl {
+    max-width: 1320px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+/**
+==[ Note ]==
+We are using mixin here, because @include is not working with @media query in SCSS | 07.12.2023
+**/
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌─┐┌─┐┬─┐┌┬┐
+│  ├─┤├┬┘ ││
+└─┘┴ ┴┴└──┴┘
+ */
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.card {
+  --xii-card-border-radius: 0.25rem;
+  --xii-card-padding: 10px;
+  background: var(--xii-card-background);
+  padding: var(--xii-card-padding);
+  border-radius: var(--xii-card-border-radius);
+  box-shadow: var(--xii-card-shadow);
+  border: var(--xii-card-border);
+  height: 100%;
+  margin: 0;
+}
+@media (prefers-color-scheme: light) {
+  .card {
+    --xii-card-background: rgb(200, 200, 200);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .card {
+    --xii-card-border: 1px solid rgba(48, 54, 61, 0.75);
+    --xii-card-background: rgb(22, 27, 34);
+    --xii-card-shadow: rgba(1, 4, 9, 0.4) 0 1px 0 0;
+  }
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/**
+┌┐ ┌─┐┌┬┐┌─┐┌─┐
+├┴┐├─┤ │││ ┬├┤
+└─┘┴ ┴─┴┘└─┘└─┘
+**/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.badge {
+  --xii-badge-border-radius: 0.25rem;
+  --xii-badge-padding: 0.125rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  white-space: nowrap;
+  vertical-align: middle;
+  align-items: center;
+  display: inline-flex;
+  padding: var(--xii-badge-padding);
+  border-radius: var(--xii-badge-border-radius);
+  color: var(--xii-badge-color);
+  background: var(--xii-badge-background);
+  box-shadow: var(--xii-badge-box-shadow);
+  border: var(--xii-badge-border);
+}
+@media (prefers-color-scheme: light) {
+  .badge {
+    --xii-badge-color: #ccc;
+    --xii-badge-box-shadow: none;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .badge {
+    --xii-badge-color: #ccc;
+    --xii-badge-background: rgb(40, 50, 60);
+    --xii-badge-box-shadow: none;
+    --xii-badge-border: 1px solid #ccc;
+  }
+}
+
+/* Wrapper class variables assigment */
+/*
+ * ------------------------------------------------------------------
+ * ███████╗ ██████╗ ██████╗███████╗██╗     ███████╗ ██████╗ ███╗   ██╗
+ * ██╔════╝██╔════╝██╔════╝██╔════╝██║     ██╔════╝██╔═══██╗████╗  ██║
+ * ███████╗██║     ██║     ███████╗██║     █████╗  ██║   ██║██╔██╗ ██║
+ * ╚════██║██║     ██║     ╚════██║██║     ██╔══╝  ██║   ██║██║╚██╗██║
+ * ███████║╚██████╗╚██████╗███████║███████╗███████╗╚██████╔╝██║ ╚████║
+ * ╚══════╝ ╚═════╝ ╚═════╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝  ╚═══╝
+ *
+ * SCSSLEON v1.0.0 (https://nulllogic.github.io/scssleon/)
+ * Copyright 2011-2024 NullLogic
+ * Licensed under MIT (https://nulllogic.github.io/scssleon/blob/main/LICENSE)
+ * ------------------------------------------------------------------
+ */
+/*
+-------------------------------------------------------
+Main configuration - initial configuration requirement
+-------------------------------------------------------
+*/
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/* SCSS variables definition requirement */
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+.label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+.input {
+  --xii-input-border-radius: 0.25rem;
+  --xii-input-padding: 0.5rem 0.75rem;
+  display: block;
+  background: var(--xii-input-background);
+  color: var(--xii-input-color);
+  padding: var(--xii-input-padding);
+  border: var(--xii-input-border);
+  border-radius: var(--xii-input-border-radius);
+  box-shadow: var(--xii-input-box-shadow);
+}
+@media (prefers-color-scheme: dark) {
+  .input {
+    --xii-input-color: #fff;
+    --xii-input-background: rgb(48, 56, 66);
+    --xii-input-border: 1px solid rgba(240, 246, 252, 0.25);
+  }
+}
+
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+.select {
+  --xii-select-border-radius: 0.25rem;
+  --xii-select-padding: 0.5rem 0.75rem;
+  display: block;
+  background: var(--xii-select-background);
+  color: var(--xii-select-color);
+  padding: var(--xii-select-padding);
+  border: var(--xii-select-border);
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: var(--xii-select-border-radius);
+  box-shadow: var(--xii-select-box-shadow);
+}
+@media (prefers-color-scheme: dark) {
+  .select {
+    --xii-select-color: #fff;
+    --xii-select-background: rgb(48, 56, 66);
+    --xii-select-border: 1px solid rgba(240, 246, 252, 0.25);
+  }
+}
+
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+.radio {
+  --xii-radio-border-radius: 0.25rem;
+  --xii-radio-padding: 0.5rem 0.75rem;
+  background: var(--xii-select-background);
+  color: var(--xii-select-color);
+  padding: var(--xii-select-padding);
+  border: var(--xii-select-border);
+  border-radius: var(--xii-select-border-radius);
+  box-shadow: var(--xii-select-box-shadow);
+}
+@media (prefers-color-scheme: dark) {
+  .radio {
+    --xii-radio-color: #fff;
+    --xii-radio-background: rgb(48, 56, 66);
+    --xii-radio-border: 1px solid rgba(240, 246, 252, 0.25);
+  }
+}
+
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+.checkbox {
+  --xii-checkbox-border-radius: 0.25rem;
+  --xii-checkbox-padding: 0.5rem 0.75rem;
+  background: var(--xii-select-background);
+  color: var(--xii-select-color);
+  padding: var(--xii-select-padding);
+  border: var(--xii-select-border);
+  border-radius: var(--xii-select-border-radius);
+  box-shadow: var(--xii-select-box-shadow);
+}
+@media (prefers-color-scheme: dark) {
+  .checkbox {
+    --xii-checkbox-color: #fff;
+    --xii-checkbox-background: rgb(48, 56, 66);
+    --xii-checkbox-border: 1px solid rgba(240, 246, 252, 0.25);
+  }
+}
+
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/**
+┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
+├┴┐│ │ │  │ │ ││││└─┐
+└─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
+**/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.btn {
+  --xii-btn-border-radius: 0.25rem;
+  --xii-btn-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 2px 0 rgba(78, 83, 90, 0.1);
+  --xii-btn-padding: 0.5rem 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  align-content: center;
+  white-space: nowrap;
+  user-select: none;
+  text-decoration: none;
+  cursor: pointer;
+  vertical-align: middle;
+  font-size: 1em;
+  padding: var(--xii-btn-padding);
+  border: var(--xii-btn-border);
+  background: var(--xii-btn-background);
+  color: var(--xii-btn-color);
+  border-radius: var(--xii-btn-border-radius);
+  position: relative;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-color-scheme: light) {
+  .btn {
+    --xii-btn-color: #fff;
+    --xii-btn-background: #fff;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .btn {
+    --xii-btn-color: #fff;
+    --xii-btn-background: rgb(48, 56, 66);
+    --xii-btn-border: 1px solid rgba(240, 246, 252, 0.25);
+    --xii-btn-hover-color: #fff;
+    --xii-btn-hover-background: rgb(59, 68, 81);
+    --xii-btn-hover-border: 1px solid rgba(229, 235, 240, 0.55);
+    --xii-btn-disabled-color: #484f58;
+    --xii-btn-disabled-background: #21262d;
+    --xii-btn-disabled-border: 1px solid rgba(240, 246, 252, 0.1);
+    --xii-btn-active-color: #fff;
+    --xii-btn-active-background: rgb(39, 45, 53);
+    --xii-btn-active-border: 1px solid rgba(240, 246, 252, 0.25);
+    --xii-btn-active-shadow: -0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset,0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26,26,26,0.2) inset;
+  }
+}
+.btn:hover:not(.loading, [disabled], .btn-link) {
+  color: var(--xii-btn-hover-color);
+  background: var(--xii-btn-hover-background);
+  border: var(--xii-btn-hover-border);
+}
+.btn:active:not(.loading, [disabled], .btn-link) {
+  color: var(--xii-btn-active-color);
+  background: var(--xii-btn-active-background);
+  border: var(--xii-btn-active-border);
+  box-shadow: var(--xii-btn-active-shadow);
+}
+.btn-link.btn {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+.btn-link.btn:hover {
+  text-decoration: underline;
+}
+.loading.btn {
+  cursor: wait;
+}
+.btn[disabled] {
+  cursor: not-allowed;
+  color: var(--xii-btn-disabled-color);
+  background: var(--xii-btn-disabled-background);
+  border: var(--xii-btn-disabled-border);
+  box-shadow: none;
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌  ┌─┐┬─┐┌─┐┬ ┬┌─┐
+├┴┐│ │ │  │ │ ││││  │ ┬├┬┘│ ││ │├─┘
+└─┘└─┘ ┴  ┴ └─┘┘└┘  └─┘┴└─└─┘└─┘┴
+*/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.btn-group {
+  --xii-btn-group-gap: 10px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.btn-group .btn:first-child {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.btn-group .btn:last-child {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.btn-group .btn:not(:first-child) {
+  margin-left: -1px;
+}
+.btn-group .btn:not(:first-child, :last-child) {
+  border-radius: 0;
+}
+.btn-group .btn:hover, .btn-group .btn:focus {
+  z-index: 1;
+}
+.separated.btn-group {
+  gap: var(--xii-btn-group-gap);
+  --xii-btn-group-border-radius: 5px;
+}
+.separated.btn-group .btn {
+  margin: 0;
+  border-radius: var(--xii-btn-group-border-radius);
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/**
+┌┐ ┬─┐┌─┐┌─┐┌┬┐┌─┐┬─┐┬ ┬┌┬┐┌┐ ┌─┐
+├┴┐├┬┘├┤ ├─┤ │││  ├┬┘│ ││││├┴┐└─┐
+└─┘┴└─└─┘┴ ┴─┴┘└─┘┴└─└─┘┴ ┴└─┘└─┘
+**/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.breadcrumb {
+  --xii-breadcrumb-padding: 0 0 0 5px;
+  list-style: none;
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--xii-breadcrumb-padding);
+}
+.breadcrumb .item {
+  display: inline-flex;
+}
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/**
+┌─┐┬  ┌─┐┬─┐┌┬┐┌─┐
+├─┤│  ├┤ ├┬┘ │ └─┐
+┴ ┴┴─┘└─┘┴└─ ┴ └─┘
+**/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.alert {
+  --xii-alert-border-radius: 0.25rem;
+  --xii-alert-padding: 1.25rem;
+  box-shadow: var(--xii-alert-shadow);
+  background: var(--xii-alert-background);
+  outline: 1px solid transparent;
+  position: relative;
+  display: flex;
+}
+@media (prefers-color-scheme: light) {
+  .alert {
+    --xii-alert-background: rgb(246, 246, 247);
+    --xii-alert-shadow: inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .alert {
+    --xii-alert-background: rgb(48, 56, 66);
+    --xii-alert-border: 1px solid rgba(182, 199, 216, 0.35);
+    --xii-alert-shadow: inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1);
+  }
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/**
+┌─┐┌─┐┌─┐┌─┐┬─┐┌┬┐┬┌─┐┌┐┌
+├─┤│  │  │ │├┬┘ ││││ ││││
+┴ ┴└─┘└─┘└─┘┴└──┴┘┴└─┘┘└┘
+**/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.accordion {
+  --xii-accordion-border-radius: 0.25rem;
+  --xii-accordion-padding: 1.25rem;
+  position: relative;
+  width: 100%;
+}
+@media (prefers-color-scheme: dark) {
+  .accordion {
+    --xii-accordion-border: 1px solid rgba(182, 199, 216, 0.35);
+    --xii-accordion-background: rgb(46, 56, 66);
+  }
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌─┐┬  ┬┌─┐┬─┐┬  ┌─┐┬ ┬
+│ │└┐┌┘├┤ ├┬┘│  ├─┤└┬┘
+└─┘ └┘ └─┘┴└─┴─┘┴ ┴ ┴
+*/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+@media (prefers-color-scheme: dark) {
+  .overlay {
+    --xii-overlay-background: rgba(15, 23, 42, 0.25);
+  }
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌─┐┌─┐┌─┐┬┌┐┌┌─┐┌┬┐┬┌─┐┌┐┌
+├─┘├─┤│ ┬││││├─┤ │ ││ ││││
+┴  ┴ ┴└─┘┴┘└┘┴ ┴ ┴ ┴└─┘┘└┘
+*/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.pagination {
+  --xii-pagination-grid-template-columns: auto auto 1fr;
+  --xii-pagination-gap: 10px;
+  --xii-pagination-left-column-aligment: start;
+  --xii-pagination-center-column-alignment: center;
+  --xii-pagination-right-column-alignment: end;
+  position: relative;
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  align-items: center;
+  grid-template-columns: var(--xii-pagination-grid-template-columns);
+  grid-gap: var(--xii-pagination-gap);
+}
+.pagination .left {
+  justify-self: var(--xii-pagination-left-column-alignment);
+}
+.pagination .center {
+  justify-self: var(--xii-pagination-center-column-alignment);
+}
+.pagination .right {
+  justify-self: var(--xii-pagination-right-column-alignment);
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌─┐┬  ┌─┐┌─┐┌─┐┬ ┬┌─┐┬  ┌┬┐┌─┐┬─┐┌─┐
+├─┘│  ├─┤│  ├┤ ├─┤│ ││   ││├┤ ├┬┘└─┐
+┴  ┴─┘┴ ┴└─┘└─┘┴ ┴└─┘┴─┘─┴┘└─┘┴└─└─┘
+*/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.placeholder {
+  --xii-placeholder-min-height: 0.55rem;
+  --xii-placeholder-border-radius: 0.1875rem;
+  --xii-placeholder-gap: 0.6rem;
+  cursor: wait;
+  display: flex;
+  flex-direction: column;
+  gap: var(--xii-placeholder-gap);
+}
+@media (prefers-color-scheme: light) {
+  .placeholder {
+    --xii-placeholder-background: #ccc;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .placeholder {
+    --xii-placeholder-background: #ccc;
+  }
+}
+.placeholder .el {
+  min-height: var(--xii-placeholder-min-height);
+  border-radius: var(--xii-placeholder-border-radius);
+  background: var(--xii-placeholder-background);
+}
+.glow.placeholder .el {
+  animation: placeholder-glow 2s ease-in-out infinite;
+}
+.wave.placeholder .el {
+  mask-size: 200% 100%;
+  -webkit-mask-size: 200% 100%;
+  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #fff, rgba(0, 0, 0, 0));
+  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #fff, rgba(0, 0, 0, 0));
+  animation: placeholder-wave 2s linear infinite;
+}
+
+/* Wrapper class variables assigment */
+@keyframes placeholder-glow {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes placeholder-wave {
+  100% {
+    mask-position: -200% 0;
+    -webkit-mask-position: -200% 0;
+  }
+}
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌┬┐┌─┐┌┬┐┌─┐┬
+││││ │ ││├─┤│
+┴ ┴└─┘─┴┘┴ ┴┴─┘
+*/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.modal {
+  nil: null;
+}
+
+/* Wrapper class variables assigment */
+/* Override default settings in the theme | @example */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┬  ┌─┐┌─┐┌┬┐┌─┐┬─┐
+│  │ │├─┤ ││├┤ ├┬┘
+┴─┘└─┘┴ ┴─┴┘└─┘┴└─
+*/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.loader {
+  nil: null;
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/**
+┌┐┌┌─┐┬  ┬
+│││├─┤└┐┌┘
+┘└┘┴ ┴ └┘ 
+**/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.nav {
+  --xii-nav-flex-direction: row;
+  --xii-nav-align-items: auto;
+  --xii-nav-gap: 0;
+  display: flex;
+  flex-direction: var(--xii-nav-flex-direction);
+  align-items: var(--xii-nav-align-items);
+  gap: var(--xii-nav-gap);
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.horizontal.nav {
+  --xii-nav-align-items: center;
+  --xii-nav-flex-direction: row;
+}
+.vertical.nav {
+  --xii-nav-flex-direction: column;
+}
+.nav .item {
+  width: auto;
+}
+.nav .item .link {
+  display: inline-flex;
+  padding: 10px;
+  color: var(--xii-nav-color);
+}
+@media (prefers-color-scheme: light) {
+  .nav .item .link {
+    --xii-nav-color: "#333";
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .nav .item .link {
+    --xii-nav-color: "#fff";
+  }
+}
+.nav .item .link:hover {
+  text-decoration: none;
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌┐┌┌─┐┬  ┬┬┌─┐┌─┐┌┬┐┬┌─┐┌┐┌
+│││├─┤└┐┌┘││ ┬├─┤ │ ││ ││││
+┘└┘┴ ┴ └┘ ┴└─┘┴ ┴ ┴ ┴└─┘┘└┘
+*/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.navbar {
+  --xii-navbar-grid-template-columns: auto auto 1fr;
+  --xii-navbar-gap: 10px;
+  --xii-navbar-left-column-aligment: start;
+  --xii-navbar-center-column-alignnent: center;
+  --xii-navbar-right-column-alignment: end;
+  position: relative;
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  grid-template-columns: var(--xii-navbar-grid-template-columns);
+  grid-gap: var(--xii-navbar-gap);
+}
+.navbar .left {
+  justify-self: var(--xii-navbar-left-column-alignment);
+}
+.navbar .center {
+  justify-self: var(--xii-navbar-center-column-alignment);
+}
+.navbar .right {
+  justify-self: var(--xii-navbar-right-column-alignment);
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+┌─┐┬┌┬┐┌─┐┌─┐┌─┐┌─┐
+└─┐│ ││├┤ │  ├─┤├─┘
+└─┘┴─┴┘└─┘└─┘┴ ┴┴
+*/
+/* Load settings and functions */
+/* SCSS variables definition requirement */
+/* Loading component settings and styling */
+.sidecap {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+@media (prefers-color-scheme: light) {
+  .sidecap {
+    --xii-sidecap-background: #ccc;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .sidecap {
+    --xii-sidecap-background: rgb(45, 56, 66);
+    --xii-sidecap-box-shadow: 0rem 1.25rem 1.25rem -0.5rem rgba(26, 26, 26, 0.28);
+  }
+}
+
+/* Wrapper class variables assigment */
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
+/*
+ * ------------------------------------------------------------------
+ * ███████╗ ██████╗ ██████╗███████╗██╗     ███████╗ ██████╗ ███╗   ██╗
+ * ██╔════╝██╔════╝██╔════╝██╔════╝██║     ██╔════╝██╔═══██╗████╗  ██║
+ * ███████╗██║     ██║     ███████╗██║     █████╗  ██║   ██║██╔██╗ ██║
+ * ╚════██║██║     ██║     ╚════██║██║     ██╔══╝  ██║   ██║██║╚██╗██║
+ * ███████║╚██████╗╚██████╗███████║███████╗███████╗╚██████╔╝██║ ╚████║
+ * ╚══════╝ ╚═════╝ ╚═════╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝  ╚═══╝
+ *
+ * SCSSLEON v1.0.0 (https://nulllogic.github.io/scssleon/)
+ * Copyright 2011-2024 NullLogic
+ * Licensed under MIT (https://nulllogic.github.io/scssleon/blob/main/LICENSE)
+ * ------------------------------------------------------------------
+ */
+/*
+-------------------------------------------------------
+Main configuration - initial configuration requirement
+-------------------------------------------------------
+*/
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.table {
+  display: table;
+}
+
+.inline-table {
+  display: inline-table;
+}
+
+.table-caption {
+  display: table-caption;
+}
+
+.table-cell {
+  display: table-cell;
+}
+
+.table-column {
+  display: table-column;
+}
+
+.table-column-group {
+  display: table-column-group;
+}
+
+.table-footer-group {
+  display: table-footer-group;
+}
+
+.table-header-group {
+  display: table-header-group;
+}
+
+.table-row-group {
+  display: table-row-group;
+}
+
+.table-row {
+  display: table-row;
+}
+
+.flow-root {
+  display: flow-root;
+}
+
+.grid {
+  display: grid;
+}
+
+.inline-grid {
+  display: inline-grid;
+}
+
+.contents {
+  display: contents;
+}
+
+.list-item {
+  display: list-item;
+}
+
+.hidden {
+  display: hidden;
+}
+
+.flex-initial {
+  flex: 0 1 auto;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.grow-0 {
+  flex-grow: 0;
+}
+
+.shrink {
+  flex-shrink: 1;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-wrap {
+  flex-wrap: flex-wrap;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: flex-wrap-reverse;
+}
+
+.flex-nowrap {
+  flex-wrap: flex-nowrap;
+}
+
+.order-none {
+  order: 0;
+}
+
+.order-first {
+  order: -9999;
+}
+
+.order-1 {
+  order: 1;
+}
+
+.order-2 {
+  order: 2;
+}
+
+.order-3 {
+  order: 3;
+}
+
+.order-4 {
+  order: 4;
+}
+
+.order-5 {
+  order: 5;
+}
+
+.order-6 {
+  order: 6;
+}
+
+.order-last {
+  order: 9999;
+}
+
+.align-items-start {
+  align-items: flex-start;
+}
+
+.align-items-end {
+  align-items: flex-end;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.align-items-baseline {
+  align-items: baseline;
+}
+
+.align-items-stretch {
+  align-items: stretch;
+}
+
+.align-content-center {
+  align-content: center;
+}
+
+.align-content-start {
+  align-content: flex-start;
+}
+
+.align-content-end {
+  align-content: flex-end;
+}
+
+.align-content-between {
+  align-content: space-between;
+}
+
+.align-content-around {
+  align-content: space-around;
+}
+
+.align-content-evenly {
+  align-content: space-evenly;
+}
+
+.align-self-start {
+  align-self: flex-start;
+}
+
+.align-self-end {
+  align-self: flex-end;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+.align-self-stretch {
+  align-self: stretch;
+}
+
+.align-self-baseline {
+  align-self: baseline;
+}
+
+.justify-content-start {
+  justify-content: flex-start;
+}
+
+.justify-content-end {
+  justify-content: flex-end;
+}
+
+.justify-content-center {
+  justify-content: center;
+}
+
+.justify-content-between {
+  justify-content: space-between;
+}
+
+.justify-content-around {
+  justify-content: space-around;
+}
+
+.justify-content-evenly {
+  justify-content: space-evenly;
+}
+
+.justify-content-stretch {
+  justify-content: stretch;
+}
+
+.justify-items-start {
+  justify-items: start;
+}
+
+.justify-items-end {
+  justify-items: end;
+}
+
+.justify-items-center {
+  justify-items: center;
+}
+
+.justify-items-stretch {
+  justify-items: stretch;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-stretch {
+  justify-self: stretch;
+}
+
+.align-baseline {
+  vertical-align: baseline;
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.align-bottom {
+  vertical-align: bottom;
+}
+
+.align-text-top {
+  vertical-align: text-top;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+
+.align-sub {
+  vertical-align: sub;
+}
+
+.align-super {
+  vertical-align: super;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-none {
+  float: none;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-none {
+  max-width: none;
+}
+
+.min-h-0 {
+  min-height: 0px;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.white-space-normal {
+  white-space: normal;
+}
+
+.white-space-nowrap {
+  white-space: nowrap;
+}
+
+.white-space-brake-spaces {
+  white-space: break-spaces;
+}
+
+.select-none {
+  user-select: none;
+}
+
+.select-text {
+  user-select: text;
+}
+
+.select-all {
+  user-select: all;
+}
+
+.select-auto {
+  user-select: auto;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: invisible;
+}
+
+.collapse {
+  visibility: collapse;
+}
+
+.grid-rows-1 {
+  grid-rows: repeat(1, minmax(0, 1fr));
+}
+
+.grid-rows-2 {
+  grid-rows: repeat(2, minmax(0, 1fr));
+}
+
+.grid-rows-3 {
+  grid-rows: repeat(3, minmax(0, 1fr));
+}
+
+.grid-rows-4 {
+  grid-rows: repeat(4, minmax(0, 1fr));
+}
+
+.grid-rows-5 {
+  grid-rows: repeat(5, minmax(0, 1fr));
+}
+
+.grid-rows-6 {
+  grid-rows: repeat(6, minmax(0, 1fr));
+}
+
+.grid-rows-none {
+  grid-rows: none;
+}
+
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
+.grid-flow-dense {
+  grid-auto-flow: dense;
+}
+
+.grid-flow-row-dense {
+  grid-auto-flow: row dense;
+}
+
+.grid-flow-col-dense {
+  grid-auto-flow: column dense;
+}
+
+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
+.auto-cols-min {
+  grid-auto-columns: min-content;
+}
+
+.auto-cols-max {
+  grid-auto-columns: max-content;
+}
+
+.auto-cols-fr {
+  grid-auto-columns: minmax(0, 1fr);
+}
+
+.auto-rows-auto {
+  grid-auto-rows: auto;
+}
+
+.auto-rows-min {
+  grid-auto-rows: min-content;
+}
+
+.auto-rows-max {
+  grid-auto-rows: max-content;
+}
+
+.auto-rows-fr {
+  grid-auto-rows: minmax(0, 1fr);
+}
+
+.gap-x-1 {
+  column-gap: 0.25rem;
+}
+
+.gap-x-2 {
+  column-gap: 0.5rem;
+}
+
+.gap-x-3 {
+  column-gap: 0.75rem;
+}
+
+/*# sourceMappingURL=scssleon.css.map */