@alexsad95/initcss/css/init.css

Minimal CSS Framework

/* ROOT VARIABLES */
/* VARIABLES MIXINS */
/* UTILITY MIXINS */
/* SIZES MAPS */
:root {
  --size-3xs: 0.125rem;
  --size-2xs: 0.25rem;
  --size-xs: 0.5rem;
  --size-s: 1rem;
  --size-m: 2rem;
  --size-l: 4rem;
  --size-xl: 8rem;
  --size-2xl: 16rem;
  --size-3xl: 32rem;
  --size-4xl: 64rem;
  --size-25: 25%;
  --size-50: 50%;
  --size-75: 75%;
  --size-100: 100%;
  --size-third: 33.3333333333%;
  --size-two-thirds: 66.6666666667%;
  --size-0: 0;
  --size-auto: auto;
  --font: "Roboto Mono", "Roboto Mono", "Vazirmatn", monospace;
}
:root .dark {
  --bg-color: #2f3338;
  --main-color: #d6d2bc;
  --caret-color: #d6d2bc;
  --sub-alt-color: #3a3c3d;
  --sub-color: #8f8e84;
  --text-color: #d6d2bc;
  --success-color: #05aa6d;
  --success-extra-color: #048857;
  --info-color: #2196f3;
  --info-extra-color: #1a78c2;
  --danger-color: #ff4a59;
  --danger-extra-color: #cc3b47;
  --warning-color: #feb53f;
  --warning-extra-color: #cb9132;
  --highlight: #efdb43;
  --black: #000000;
  --selector-image: url("data:image/svg+xml,<svg viewBox='0 0 100 100' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><path d='M10 30 L50 70 L90 30' stroke='%23d6d2bc' stroke-width='10' fill='none' stroke-linecap='round'/></svg>");
}
:root .light {
  --bg-color: #efead0;
  --main-color: #5f605e;
  --caret-color: #5f605e;
  --sub-color: #8f8e84;
  --sub-alt-color: #dbd6c4;
  --text-color: #333538;
  --success-color: #05aa6d;
  --success-extra-color: #048857;
  --info-color: #2196f3;
  --info-extra-color: #1a78c2;
  --danger-color: #c43c53;
  --danger-extra-color: #9d3042;
  --warning-color: #d2ad3e;
  --warning-extra-color: #a88a32;
  --highlight: #efdb43;
  --black: #000000;
  --selector-image: url("data:image/svg+xml,<svg viewBox='0 0 100 100' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><path d='M10 30 L50 70 L90 30' stroke='%23333538' stroke-width='10' fill='none' stroke-linecap='round'/></svg>");
}

/* MAIN STYLES */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  max-width: 969px;
  padding: var(--size-m);
  font-family: var(--font);
  line-height: 1.4;
  color: var(--text-color);
  background: var(--bg-color);
}

::-moz-selection {
  background: var(--text-color);
  color: var(--sub-alt-color);
}

::selection {
  background-color: var(--main-color);
  color: var(--sub-alt-color);
}

:autofill,
:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus,
:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-color);
  -webkit-box-shadow: 0 0 0 1000px var(--sub-alt-color) inset !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

[disabled] {
  cursor: not-allowed;
}

.ic-bordered {
  border: 2px solid var(--main-color);
}

.ic-dashed {
  border: 2px dashed var(--main-color);
}

.ic-dotted {
  border: 2px dotted var(--main-color);
}

.ic-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--sub-color);
}

/* LAYOUT */
hstack {
  display: flex;
  align-self: stretch;
  flex-direction: row;
}
hstack.ic-wrap {
  flex-wrap: wrap;
}
hstack.ic-shrink > * {
  flex: 2 2;
}
hstack.ic-space-xl > * {
  margin-right: var(--size-xl);
}
hstack.ic-space-l > * {
  margin-right: var(--size-l);
}
hstack.ic-space-m > * {
  margin-right: var(--size-m);
}
hstack.ic-space-s > * {
  margin-right: var(--size-s);
}
hstack.ic-space-xs > * {
  margin-right: var(--size-xs);
}
hstack.ic-space-2xs > * {
  margin-right: var(--size-2xs);
}
hstack.ic-align-y-top {
  align-items: flex-start;
}
hstack.ic-align-y-center {
  align-items: center;
}
hstack.ic-align-y-bottom {
  align-items: flex-end;
}
hstack.ic-align-x-left {
  justify-content: flex-start;
}
hstack.ic-align-x-center {
  justify-content: center;
}
hstack.ic-align-x-right {
  justify-content: flex-end;
}
hstack > :last-child {
  margin-right: 0;
}

vstack {
  display: flex;
  align-self: stretch;
  flex-direction: column;
}
vstack.ic-space-xl > * {
  margin-bottom: var(--size-xl);
}
vstack.ic-space-l > * {
  margin-bottom: var(--size-l);
}
vstack.ic-space-m > * {
  margin-bottom: var(--size-m);
}
vstack.ic-space-s > * {
  margin-bottom: var(--size-s);
}
vstack.ic-space-xs > * {
  margin-bottom: var(--size-xs);
}
vstack.ic-space-2xs > * {
  margin-bottom: var(--size-2xs);
}
vstack.ic-align-x-left {
  align-items: flex-start;
}
vstack.ic-align-x-center {
  align-items: center;
}
vstack.ic-align-x-right {
  align-items: flex-end;
}
vstack.ic-align-y-top {
  justify-content: flex-start;
}
vstack.ic-align-y-center {
  justify-content: center;
}
vstack.ic-align-y-bottom {
  justify-content: flex-end;
}
vstack > :last-child {
  margin-bottom: 0;
}

label {
  width: fit-content;
  display: block;
}
label:has([type=checkbox], [type=radio]) {
  cursor: pointer;
}
label:has([type=checkbox]:disabled, [type=radio]:disabled) {
  cursor: not-allowed;
  opacity: 0.3;
}

button,
.ic-button,
input[type=button],
input[type=reset],
input[type=submit] {
  text-align: center;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: var(--size-xs);
  background: var(--sub-alt-color);
  text-align: center;
  align-content: center;
  user-select: none;
  -webkit-user-select: none;
  height: min-content;
  height: -moz-min-content;
  line-height: 1.25;
  appearance: none;
  border: none;
  font-family: inherit;
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: center;
}
button.ic-outline,
.ic-button.ic-outline,
input[type=button].ic-outline,
input[type=reset].ic-outline,
input[type=submit].ic-outline {
  border: 2px solid var(--text-color);
  background: var(--bg-color);
  color: var(--text-color);
}
button.ic-outline.ic-success,
.ic-button.ic-outline.ic-success,
input[type=button].ic-outline.ic-success,
input[type=reset].ic-outline.ic-success,
input[type=submit].ic-outline.ic-success {
  border: 2px solid var(--success-color);
  background: var(--bg-color);
  color: var(--success-color);
}
button.ic-outline.ic-success:hover,
.ic-button.ic-outline.ic-success:hover,
input[type=button].ic-outline.ic-success:hover,
input[type=reset].ic-outline.ic-success:hover,
input[type=submit].ic-outline.ic-success:hover {
  border: 2px solid var(--success-color);
  background: var(--success-color);
  color: var(--bg-color);
}
button.ic-outline.ic-info,
.ic-button.ic-outline.ic-info,
input[type=button].ic-outline.ic-info,
input[type=reset].ic-outline.ic-info,
input[type=submit].ic-outline.ic-info {
  border: 2px solid var(--info-color);
  background: var(--bg-color);
  color: var(--info-color);
}
button.ic-outline.ic-info:hover,
.ic-button.ic-outline.ic-info:hover,
input[type=button].ic-outline.ic-info:hover,
input[type=reset].ic-outline.ic-info:hover,
input[type=submit].ic-outline.ic-info:hover {
  border: 2px solid var(--info-color);
  background: var(--info-color);
  color: var(--bg-color);
}
button.ic-outline.ic-danger,
.ic-button.ic-outline.ic-danger,
input[type=button].ic-outline.ic-danger,
input[type=reset].ic-outline.ic-danger,
input[type=submit].ic-outline.ic-danger {
  border: 2px solid var(--danger-color);
  background: var(--bg-color);
  color: var(--danger-color);
}
button.ic-outline.ic-danger:hover,
.ic-button.ic-outline.ic-danger:hover,
input[type=button].ic-outline.ic-danger:hover,
input[type=reset].ic-outline.ic-danger:hover,
input[type=submit].ic-outline.ic-danger:hover {
  border: 2px solid var(--danger-color);
  background: var(--danger-color);
  color: var(--bg-color);
}
button.ic-outline.ic-warning,
.ic-button.ic-outline.ic-warning,
input[type=button].ic-outline.ic-warning,
input[type=reset].ic-outline.ic-warning,
input[type=submit].ic-outline.ic-warning {
  border: 2px solid var(--warning-color);
  background: var(--bg-color);
  color: var(--warning-color);
}
button.ic-outline.ic-warning:hover,
.ic-button.ic-outline.ic-warning:hover,
input[type=button].ic-outline.ic-warning:hover,
input[type=reset].ic-outline.ic-warning:hover,
input[type=submit].ic-outline.ic-warning:hover {
  border: 2px solid var(--warning-color);
  background: var(--warning-color);
  color: var(--bg-color);
}
button.ic-text,
.ic-button.ic-text,
input[type=button].ic-text,
input[type=reset].ic-text,
input[type=submit].ic-text {
  background: var(--bg-color);
  color: var(--text-color);
}
button.ic-text:hover,
.ic-button.ic-text:hover,
input[type=button].ic-text:hover,
input[type=reset].ic-text:hover,
input[type=submit].ic-text:hover {
  color: var(--text-color);
  background: var(--sub-alt-color);
}
button.ic-text:active,
.ic-button.ic-text:active,
input[type=button].ic-text:active,
input[type=reset].ic-text:active,
input[type=submit].ic-text:active {
  opacity: 0.8;
  color: var(--text-color);
}
button.ic-link,
.ic-button.ic-link,
input[type=button].ic-link,
input[type=reset].ic-link,
input[type=submit].ic-link {
  background: none;
  color: var(--sub-color);
}
button.ic-link:hover,
.ic-button.ic-link:hover,
input[type=button].ic-link:hover,
input[type=reset].ic-link:hover,
input[type=submit].ic-link:hover {
  background: none;
  color: var(--text-color);
}
button.ic-link:active,
.ic-button.ic-link:active,
input[type=button].ic-link:active,
input[type=reset].ic-link:active,
input[type=submit].ic-link:active {
  color: var(--sub-color);
}
button.ic-active,
.ic-button.ic-active,
input[type=button].ic-active,
input[type=reset].ic-active,
input[type=submit].ic-active {
  background: var(--main-color);
  color: var(--bg-color);
}
button.ic-active:hover,
.ic-button.ic-active:hover,
input[type=button].ic-active:hover,
input[type=reset].ic-active:hover,
input[type=submit].ic-active:hover {
  background: var(--text-color);
}
button.ic-active:active,
.ic-button.ic-active:active,
input[type=button].ic-active:active,
input[type=reset].ic-active:active,
input[type=submit].ic-active:active {
  background: var(--sub-color);
  color: var(--bg-color);
}
button.ic-success,
.ic-button.ic-success,
input[type=button].ic-success,
input[type=reset].ic-success,
input[type=submit].ic-success {
  background: var(--success-color);
  color: var(--bg-color);
}
button.ic-success:hover,
.ic-button.ic-success:hover,
input[type=button].ic-success:hover,
input[type=reset].ic-success:hover,
input[type=submit].ic-success:hover {
  background: var(--success-extra-color);
}
button.ic-success:active,
.ic-button.ic-success:active,
input[type=button].ic-success:active,
input[type=reset].ic-success:active,
input[type=submit].ic-success:active {
  background: var(--success-extra-color);
  opacity: 0.8;
}
button.ic-info,
.ic-button.ic-info,
input[type=button].ic-info,
input[type=reset].ic-info,
input[type=submit].ic-info {
  background: var(--info-color);
  color: var(--bg-color);
}
button.ic-info:hover,
.ic-button.ic-info:hover,
input[type=button].ic-info:hover,
input[type=reset].ic-info:hover,
input[type=submit].ic-info:hover {
  background: var(--info-extra-color);
}
button.ic-info:active,
.ic-button.ic-info:active,
input[type=button].ic-info:active,
input[type=reset].ic-info:active,
input[type=submit].ic-info:active {
  background: var(--info-extra-color);
  opacity: 0.8;
}
button.ic-danger,
.ic-button.ic-danger,
input[type=button].ic-danger,
input[type=reset].ic-danger,
input[type=submit].ic-danger {
  background: var(--danger-color);
  color: var(--bg-color);
}
button.ic-danger:hover,
.ic-button.ic-danger:hover,
input[type=button].ic-danger:hover,
input[type=reset].ic-danger:hover,
input[type=submit].ic-danger:hover {
  background: var(--danger-extra-color);
}
button.ic-danger:active,
.ic-button.ic-danger:active,
input[type=button].ic-danger:active,
input[type=reset].ic-danger:active,
input[type=submit].ic-danger:active {
  background: var(--danger-extra-color);
  opacity: 0.8;
}
button.ic-warning,
.ic-button.ic-warning,
input[type=button].ic-warning,
input[type=reset].ic-warning,
input[type=submit].ic-warning {
  background: var(--warning-color);
  color: var(--bg-color);
}
button.ic-warning:hover,
.ic-button.ic-warning:hover,
input[type=button].ic-warning:hover,
input[type=reset].ic-warning:hover,
input[type=submit].ic-warning:hover {
  background: var(--warning-extra-color);
}
button.ic-warning:active,
.ic-button.ic-warning:active,
input[type=button].ic-warning:active,
input[type=reset].ic-warning:active,
input[type=submit].ic-warning:active {
  background: var(--warning-extra-color);
  opacity: 0.8;
}
button[disabled], button.ic-disabled,
.ic-button[disabled],
.ic-button.ic-disabled,
input[type=button][disabled],
input[type=button].ic-disabled,
input[type=reset][disabled],
input[type=reset].ic-disabled,
input[type=submit][disabled],
input[type=submit].ic-disabled {
  opacity: 0.3;
  pointer-events: none;
}
button[disabled]:hover, button.ic-disabled:hover,
.ic-button[disabled]:hover,
.ic-button.ic-disabled:hover,
input[type=button][disabled]:hover,
input[type=button].ic-disabled:hover,
input[type=reset][disabled]:hover,
input[type=reset].ic-disabled:hover,
input[type=submit][disabled]:hover,
input[type=submit].ic-disabled:hover {
  background: var(--text-color);
  outline: none;
}
button[disabled]:active, button.ic-disabled:active,
.ic-button[disabled]:active,
.ic-button.ic-disabled:active,
input[type=button][disabled]:active,
input[type=button].ic-disabled:active,
input[type=reset][disabled]:active,
input[type=reset].ic-disabled:active,
input[type=submit][disabled]:active,
input[type=submit].ic-disabled:active {
  background: var(--sub-color);
  color: var(--bg-color);
}
button:hover,
.ic-button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  color: var(--bg-color);
  background: var(--text-color);
  outline: none;
}
button:focus-visible,
.ic-button:focus-visible,
input[type=button]:focus-visible,
input[type=reset]:focus-visible,
input[type=submit]:focus-visible {
  box-shadow: 0 0 0 0.1rem var(--bg-color), 0 0 0 0.2rem var(--text-color);
  outline: none;
}
button:active,
.ic-button:active,
input[type=button]:active,
input[type=reset]:active,
input[type=submit]:active {
  background: var(--sub-color);
  color: var(--bg-color);
}
button.ic-smallest,
.ic-button.ic-smallest,
input[type=button].ic-smallest,
input[type=reset].ic-smallest,
input[type=submit].ic-smallest {
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
}
button.ic-small,
.ic-button.ic-small,
input[type=button].ic-small,
input[type=reset].ic-small,
input[type=submit].ic-small {
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
}
button.ic-large,
.ic-button.ic-large,
input[type=button].ic-large,
input[type=reset].ic-large,
input[type=submit].ic-large {
  padding: 0.4rem 0.8rem;
  font-size: 1.5rem;
}
button.ic-largest,
.ic-button.ic-largest,
input[type=button].ic-largest,
input[type=reset].ic-largest,
input[type=submit].ic-largest {
  padding: 0.6rem 1.2rem;
  font-size: 1.7rem;
}

input,
textarea {
  border: 2px solid transparent;
  border-radius: var(--size-xs);
  background: var(--sub-alt-color);
  color: var(--text-color);
  padding: var(--size-xs);
  font-size: var(--size-s);
  font-family: var(--font);
  caret-color: var(--main-color);
  line-height: 1.2rem;
  transition: border-color 0.2s ease;
}
input:disabled,
textarea:disabled {
  opacity: 0.3;
}

input:focus-visible,
textarea:focus-visible {
  border-color: var(--text-color);
  outline: none;
}

input[type=range] {
  cursor: pointer;
  appearance: none;
  padding: 0;
  width: 100%;
  border-radius: var(--size-xs);
}
input[type=range]::-moz-range-track {
  background-color: #ccc;
  border-radius: 2px;
  height: var(--size-2xs);
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: var(--size-s);
  width: var(--size-m);
  border-radius: var(--size-xs);
  background-color: var(--text-color);
  cursor: pointer;
  border: none;
}
input[type=range]::-moz-range-thumb {
  height: var(--size-s);
  width: var(--size-m);
  border-radius: var(--size-xs);
  background-color: var(--text-color);
  cursor: pointer;
  border: none;
}
input[type=range]::-ms-thumb {
  height: var(--size-s);
  width: var(--size-m);
  border-radius: var(--size-xs);
  background-color: var(--text-color);
  cursor: pointer;
  border: none;
}

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  padding: 4px;
  margin: var(--size-xs);
  cursor: pointer;
  vertical-align: middle;
  background: var(--bg-color);
  box-shadow: 0 0 0 0.11rem var(--main-color);
  border: 4px solid var(--bg-color);
  border-radius: 4px;
}
input[type=checkbox]:checked {
  background: var(--main-color);
  height: 0.8rem;
  width: 0.75rem;
}
input[type=checkbox]:indeterminate {
  opacity: 0.5;
}
input[type=checkbox]:disabled, input[type=checkbox]:disabled ~ label {
  cursor: not-allowed;
  opacity: 0.3;
}

input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  padding: 4px;
  margin: var(--size-xs);
  cursor: pointer;
  vertical-align: middle;
  background: var(--bg-color);
  box-shadow: 0 0 0 0.11rem var(--main-color);
  border: 4px solid var(--bg-color);
  border-radius: 100%;
}
input[type=radio]:checked {
  background: var(--main-color);
  height: 0.8rem;
  width: 0.75rem;
}
input[type=radio]:indeterminate {
  opacity: 0.5;
}
input[type=radio]:disabled, input[type=radio]:disabled ~ label {
  cursor: not-allowed;
  opacity: 0.3;
}

textarea {
  resize: vertical;
  width: 100%;
  padding: var(--size-xs);
  line-height: 1.2rem;
  min-height: var(--size-l);
  max-height: var(--size-2xl);
}

select {
  cursor: pointer;
  appearance: none;
  width: 100%;
  color: var(--text-color);
  border: 2px solid transparent;
  border-radius: var(--size-xs);
  background-color: var(--sub-alt-color);
  background-image: var(--selector-image);
  background-repeat: no-repeat;
  background-position: right var(--size-s) center;
  padding: var(--size-xs);
  font-size: var(--size-s);
  font-family: var(--font);
  caret-color: var(--main-color);
  line-height: 1.2rem;
  transition: border-color 0.2s ease;
}
select:focus {
  border-color: var(--text-color);
  outline: none;
}

ol,
ul,
dl {
  margin: 0;
}

blockquote {
  border-left: 4px solid var(--main-color);
  margin: 0;
  padding: var(--size-xs) var(--size-s);
  font-style: italic;
}

blockquote > footer {
  margin-left: var(--size-xs);
  margin-top: var(--size-xs);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--main-color);
  border: 0;
}

blockquote cite {
  font-style: normal;
}

a {
  display: inline-block;
  color: var(--sub-color);
  transition: color 0.2s, opacity 0.2s, background 0.2s;
}
a.ic-text, a.ic-button {
  height: min-content;
  line-height: 1.25;
  display: inline-flex;
  gap: 0.5em;
  text-decoration: none;
  align-items: center;
}
a.ic-text:focus-visible, a.ic-button:focus-visible {
  border-radius: var(--size-xs);
}
a:hover {
  color: var(--text-color);
}
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1rem var(--bg-color), 0 0 0 0.2rem var(--text-color);
  border-radius: calc(var(--size-xs) / 2);
}

.ic-badge {
  --primary: var(--info-color);
  --ic-badge-bg: var(--sub-alt-color);
  --ic-badge-color: var(--text-color);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--size-xs);
  background: var(--ic-badge-bg);
  color: var(--ic-badge-color);
  padding: 0.5rem;
  font-size: 1rem;
  height: 32px;
}
.ic-badge.ic-smallest {
  font-size: 0.6rem;
  height: 18px;
}
.ic-badge.ic-small {
  font-size: 0.8rem;
  height: 24px;
}
.ic-badge.ic-large {
  font-size: 1rem;
  height: 40px;
}
.ic-badge.ic-primary {
  --ic-badge-color: #2196f3;
  --ic-badge-bg: #d3eafd;
}
.ic-badge.ic-primary .ic-badge-count {
  border: none;
}
.ic-badge.ic-danger {
  --ic-badge-color: #ff4a59;
  --ic-badge-bg: #ffdbde;
}
.ic-badge.ic-danger .ic-badge-count {
  border: none;
}
.ic-badge.ic-warning {
  --ic-badge-color: #feb53f;
  --ic-badge-bg: #fff0d9;
}
.ic-badge.ic-warning .ic-badge-count {
  border: none;
}
.ic-badge.ic-success {
  --ic-badge-color: #05aa6d;
  --ic-badge-bg: #cdeee2;
}
.ic-badge.ic-success .ic-badge-count {
  border: none;
}
.ic-badge .ic-icon {
  line-height: 1;
}
.ic-badge .ic-badge-count {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  background: var(--ic-badge-color);
  color: var(--ic-badge-bg);
  border-radius: 9999px;
  border: 1px solid var(--sub-color);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

details {
  border: 2px solid var(--text-color);
  border-radius: var(--size-xs);
  background: var(--bg-color);
  transition: all 0.2s ease-in-out;
}
details[open] summary::before {
  transform: translateY(-50%) rotate(0deg);
}

.ic-details-content {
  padding: 1rem;
  color: var(--text-color);
}

summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 24px;
  margin: 10px;
  font-weight: 600;
}
summary::before {
  content: "";
  width: 14px;
  height: 14px;
  background-image: var(--selector-image);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transition: transform 0.2s ease;
}

.ic-divider {
  border: none;
  height: 1px;
  background: var(--sub-color);
  border-radius: var(--size-xs);
  margin: 1rem 0;
}
.ic-divider-medium {
  border: none;
  height: 1px;
  background: var(--sub-color);
  border-radius: var(--size-xs);
  margin: 1rem 0;
  height: 2px;
}
.ic-divider-thick {
  border: none;
  height: 1px;
  background: var(--sub-color);
  border-radius: var(--size-xs);
  margin: 1rem 0;
  height: 4px;
}
.ic-divider-dotted {
  border: none;
  border-top: 1px dotted var(--sub-color);
  margin: 1.5rem 0;
}
.ic-divider-dashed {
  border: none;
  border-top: 1px dashed var(--sub-color);
  margin: 1.5rem 0;
}
.ic-divider-vertical {
  width: 1px;
  height: 1.5em;
  background: var(--sub-color);
  margin: 0 1rem;
}
.ic-divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--sub-color);
  margin: 1rem 0;
}
.ic-divider-text::before, .ic-divider-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--sub-color);
}
.ic-divider-text::before {
  margin-right: 0.5em;
}
.ic-divider-text::after {
  margin-left: 0.5em;
}

table {
  width: 100%;
  border-spacing: 0;
  border: 2px solid var(--text-color);
}
table td,
table th {
  border: 1px solid var(--sub-color);
  padding: 0.6rem;
}
table caption {
  padding: 0.6rem;
}
table colgroup col.ic-highlight-col {
  background: var(--sub-alt-color);
}
table.ic-horizontal-dividers {
  border: none;
}
table.ic-horizontal-dividers td,
table.ic-horizontal-dividers th {
  border: none;
  border-bottom: 1px solid var(--sub-color);
}
table.ic-hoverable tr:hover {
  background: var(--sub-alt-color);
}
table.ic-vertical-zebra td:nth-child(even),
table.ic-vertical-zebra th:nth-child(even) {
  background: var(--sub-alt-color);
}
table.ic-horizontal-zebra tr:nth-child(even) {
  background: var(--sub-alt-color);
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  border-radius: var(--size-xs);
  padding: 10px;
}
fieldset.ic-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-xs);
  align-items: flex-start;
}

h1 {
  font-size: 1.8rem;
}
h1.ic-highlight-text {
  background: var(--text-color);
  color: var(--bg-color);
  font-size: 3rem;
  display: inline;
  padding: 0 0.2rem;
  margin-left: -0.2rem;
  margin-right: -0.2rem;
}
h1.ic-primary-text {
  word-break: normal;
  font-size: 4rem;
  line-height: 1;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
p {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {
  font-weight: 600;
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}

sub,
sup,
small {
  font-size: x-small;
}

small {
  display: inline-block;
}

var,
p.ic-small {
  font-size: small;
}

dt,
p.ic-large {
  font-size: larger;
}

dt {
  font-weight: 600;
}

dd {
  margin-left: var(--size-m);
  margin-top: var(--size-s);
}

mark {
  background-color: var(--highlight);
  border-radius: var(--size-2xs);
  padding: var(--size-3xs);
  color: var(--black);
}

kbd {
  color: var(--bg-color);
  background-color: var(--sub-color);
  border-radius: var(--size-2xs);
  padding: 0.2rem 0.3rem;
  margin: 0;
  display: inline-block;
  font-size: 0.7rem;
  line-height: 0.7rem;
}

pre {
  background: var(--sub-alt-color);
  border-radius: var(--size-xs);
  color: var(--text-color);
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.5;
  tab-size: 2;
}

pre code {
  display: block;
  white-space: pre;
  padding: 0;
  text-wrap: auto;
}

code {
  font-family: "Fira Code", monospace;
  font-size: 0.8rem;
  background: var(--sub-alt-color);
  border-radius: var(--size-2xs);
  padding: 0.2rem 0.4rem;
}

.ic-code-block {
  background: var(--sub-alt-color);
  border-radius: var(--size-xs);
  position: relative;
}
.ic-code-block__header {
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0.5rem;
  background: var(--sub-alt-color);
  font-size: 0.75rem;
  font-family: monospace;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.ic-code-block__lang {
  display: inline;
  padding-top: 0.35rem;
}
.ic-code-block__copy-btn {
  display: none;
}
.ic-code-block:hover .ic-code-block__lang {
  display: none;
}
.ic-code-block:hover .ic-code-block__copy-btn {
  display: inline;
}

.ic-avatar {
  --avatar-size: 3rem;
  --avatar-radius: 50%;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 0px;
}
.ic-avatar.ic-small {
  --avatar-size: var(--size-m);
}
.ic-avatar.ic-medium {
  --avatar-size: var(--size-l);
}
.ic-avatar.ic-large {
  --avatar-size: var(--size-xl);
}
.ic-avatar.ic-square {
  --avatar-radius: 0;
}
.ic-avatar.ic-soft {
  --avatar-radius: 0.5rem;
}
.ic-avatar__image {
  border-radius: var(--avatar-radius);
  background-color: var(--sub-alt-color);
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border: 2px solid var(--text-color);
  transition: transform 0.2s ease;
}
.ic-avatar-group {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ic-avatar-group .ic-avatar {
  margin-left: -0.5rem;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background-color: var(--sub-alt-color);
}
.ic-avatar-group .ic-avatar:first-child {
  margin: 0;
}
.ic-avatar-group .ic-avatar img {
  display: block;
  width: 100%;
  height: auto;
}
.ic-avatar--more {
  width: var(--avatar-size);
  height: var(--avatar-size);
  background: var(--bg-color);
  border-radius: 50%;
  border: 2px solid var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: var(--text-color);
}
.ic-avatar-group.ic-small .ic-avatar {
  --avatar-size: var(--size-m);
  font-size: 0.75rem;
}
.ic-avatar-group.ic-large .ic-avatar {
  --avatar-size: var(--size-l);
  font-size: 1.25rem;
}

.ic-article-image {
  margin: 1rem 0;
  text-align: center;
}
.ic-article-image__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--size-xs);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.ic-article-image__caption {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--sub-color);
  font-style: italic;
}

/* POSITIONING */
.ic-static {
  position: static;
}

.ic-relative {
  position: relative;
}

.ic-absolute {
  position: absolute;
}

.ic-fixed {
  position: fixed;
}

.ic-shrink {
  flex: 2 2;
}

/* COORDINATES */
.ic-top-0 {
  top: 0;
}

.ic-right-0 {
  right: 0;
}

.ic-bottom-0 {
  bottom: 0;
}

.ic-left-0 {
  left: 0;
}

.ic-top-s {
  top: var(--size-s);
}

.ic-right-s {
  right: var(--size-s);
}

.ic-bottom-s {
  bottom: var(--size-s);
}

.ic-left-s {
  left: var(--size-s);
}

.ic-top-m {
  top: var(--size-m);
}

.ic-right-m {
  right: var(--size-m);
}

.ic-bottom-m {
  bottom: var(--size-m);
}

.ic-left-m {
  left: var(--size-m);
}

.ic-top-l {
  top: var(--size-l);
}

.ic-right-l {
  right: var(--size-l);
}

.ic-bottom-l {
  bottom: var(--size-l);
}

.ic-left-l {
  left: var(--size-l);
}

.ic-fill {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* BORDER-RADIUS */
.ic-br-0 {
  border-radius: 0;
}

.ic-br-3xs {
  border-radius: var(--size-3xs);
}

.ic-br-2xs {
  border-radius: var(--size-2xs);
}

.ic-br-xs {
  border-radius: var(--size-xs);
}

.ic-br-s {
  border-radius: var(--size-s);
}

.ic-br-m {
  border-radius: var(--size-m);
}

.ic-br-100 {
  border-radius: 100%;
}

.ic-br-pill {
  border-radius: 9999px;
}

.ic-br-bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ic-br-top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ic-br-right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ic-br-left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* SPACING */
/* SIZES MAPS */
.ic-pa-3xs {
  padding: 0.125rem;
}

.ic-pl-3xs {
  padding-left: 0.125rem;
}

.ic-pr-3xs {
  padding-right: 0.125rem;
}

.ic-pb-3xs {
  padding-bottom: 0.125rem;
}

.ic-pt-3xs {
  padding-top: 0.125rem;
}

.ic-py-3xs {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.ic-px-3xs {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.ic-ma-3xs {
  margin: 0.125rem;
}

.ic-ml-3xs {
  margin-left: 0.125rem;
}

.ic-mr-3xs {
  margin-right: 0.125rem;
}

.ic-mb-3xs {
  margin-bottom: 0.125rem;
}

.ic-mt-3xs {
  margin-top: 0.125rem;
}

.ic-my-3xs {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.ic-mx-3xs {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.ic-pa-2xs {
  padding: 0.25rem;
}

.ic-pl-2xs {
  padding-left: 0.25rem;
}

.ic-pr-2xs {
  padding-right: 0.25rem;
}

.ic-pb-2xs {
  padding-bottom: 0.25rem;
}

.ic-pt-2xs {
  padding-top: 0.25rem;
}

.ic-py-2xs {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.ic-px-2xs {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.ic-ma-2xs {
  margin: 0.25rem;
}

.ic-ml-2xs {
  margin-left: 0.25rem;
}

.ic-mr-2xs {
  margin-right: 0.25rem;
}

.ic-mb-2xs {
  margin-bottom: 0.25rem;
}

.ic-mt-2xs {
  margin-top: 0.25rem;
}

.ic-my-2xs {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.ic-mx-2xs {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.ic-pa-xs {
  padding: 0.5rem;
}

.ic-pl-xs {
  padding-left: 0.5rem;
}

.ic-pr-xs {
  padding-right: 0.5rem;
}

.ic-pb-xs {
  padding-bottom: 0.5rem;
}

.ic-pt-xs {
  padding-top: 0.5rem;
}

.ic-py-xs {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.ic-px-xs {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ic-ma-xs {
  margin: 0.5rem;
}

.ic-ml-xs {
  margin-left: 0.5rem;
}

.ic-mr-xs {
  margin-right: 0.5rem;
}

.ic-mb-xs {
  margin-bottom: 0.5rem;
}

.ic-mt-xs {
  margin-top: 0.5rem;
}

.ic-my-xs {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.ic-mx-xs {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.ic-pa-s {
  padding: 1rem;
}

.ic-pl-s {
  padding-left: 1rem;
}

.ic-pr-s {
  padding-right: 1rem;
}

.ic-pb-s {
  padding-bottom: 1rem;
}

.ic-pt-s {
  padding-top: 1rem;
}

.ic-py-s {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ic-px-s {
  padding-left: 1rem;
  padding-right: 1rem;
}

.ic-ma-s {
  margin: 1rem;
}

.ic-ml-s {
  margin-left: 1rem;
}

.ic-mr-s {
  margin-right: 1rem;
}

.ic-mb-s {
  margin-bottom: 1rem;
}

.ic-mt-s {
  margin-top: 1rem;
}

.ic-my-s {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.ic-mx-s {
  margin-left: 1rem;
  margin-right: 1rem;
}

.ic-pa-m {
  padding: 2rem;
}

.ic-pl-m {
  padding-left: 2rem;
}

.ic-pr-m {
  padding-right: 2rem;
}

.ic-pb-m {
  padding-bottom: 2rem;
}

.ic-pt-m {
  padding-top: 2rem;
}

.ic-py-m {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ic-px-m {
  padding-left: 2rem;
  padding-right: 2rem;
}

.ic-ma-m {
  margin: 2rem;
}

.ic-ml-m {
  margin-left: 2rem;
}

.ic-mr-m {
  margin-right: 2rem;
}

.ic-mb-m {
  margin-bottom: 2rem;
}

.ic-mt-m {
  margin-top: 2rem;
}

.ic-my-m {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.ic-mx-m {
  margin-left: 2rem;
  margin-right: 2rem;
}

.ic-pa-l {
  padding: 4rem;
}

.ic-pl-l {
  padding-left: 4rem;
}

.ic-pr-l {
  padding-right: 4rem;
}

.ic-pb-l {
  padding-bottom: 4rem;
}

.ic-pt-l {
  padding-top: 4rem;
}

.ic-py-l {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.ic-px-l {
  padding-left: 4rem;
  padding-right: 4rem;
}

.ic-ma-l {
  margin: 4rem;
}

.ic-ml-l {
  margin-left: 4rem;
}

.ic-mr-l {
  margin-right: 4rem;
}

.ic-mb-l {
  margin-bottom: 4rem;
}

.ic-mt-l {
  margin-top: 4rem;
}

.ic-my-l {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.ic-mx-l {
  margin-left: 4rem;
  margin-right: 4rem;
}

.ic-pa-xl {
  padding: 8rem;
}

.ic-pl-xl {
  padding-left: 8rem;
}

.ic-pr-xl {
  padding-right: 8rem;
}

.ic-pb-xl {
  padding-bottom: 8rem;
}

.ic-pt-xl {
  padding-top: 8rem;
}

.ic-py-xl {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.ic-px-xl {
  padding-left: 8rem;
  padding-right: 8rem;
}

.ic-ma-xl {
  margin: 8rem;
}

.ic-ml-xl {
  margin-left: 8rem;
}

.ic-mr-xl {
  margin-right: 8rem;
}

.ic-mb-xl {
  margin-bottom: 8rem;
}

.ic-mt-xl {
  margin-top: 8rem;
}

.ic-my-xl {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.ic-mx-xl {
  margin-left: 8rem;
  margin-right: 8rem;
}

.ic-pa-2xl {
  padding: 16rem;
}

.ic-pl-2xl {
  padding-left: 16rem;
}

.ic-pr-2xl {
  padding-right: 16rem;
}

.ic-pb-2xl {
  padding-bottom: 16rem;
}

.ic-pt-2xl {
  padding-top: 16rem;
}

.ic-py-2xl {
  padding-top: 16rem;
  padding-bottom: 16rem;
}

.ic-px-2xl {
  padding-left: 16rem;
  padding-right: 16rem;
}

.ic-ma-2xl {
  margin: 16rem;
}

.ic-ml-2xl {
  margin-left: 16rem;
}

.ic-mr-2xl {
  margin-right: 16rem;
}

.ic-mb-2xl {
  margin-bottom: 16rem;
}

.ic-mt-2xl {
  margin-top: 16rem;
}

.ic-my-2xl {
  margin-top: 16rem;
  margin-bottom: 16rem;
}

.ic-mx-2xl {
  margin-left: 16rem;
  margin-right: 16rem;
}

.ic-pa-3xl {
  padding: 32rem;
}

.ic-pl-3xl {
  padding-left: 32rem;
}

.ic-pr-3xl {
  padding-right: 32rem;
}

.ic-pb-3xl {
  padding-bottom: 32rem;
}

.ic-pt-3xl {
  padding-top: 32rem;
}

.ic-py-3xl {
  padding-top: 32rem;
  padding-bottom: 32rem;
}

.ic-px-3xl {
  padding-left: 32rem;
  padding-right: 32rem;
}

.ic-ma-3xl {
  margin: 32rem;
}

.ic-ml-3xl {
  margin-left: 32rem;
}

.ic-mr-3xl {
  margin-right: 32rem;
}

.ic-mb-3xl {
  margin-bottom: 32rem;
}

.ic-mt-3xl {
  margin-top: 32rem;
}

.ic-my-3xl {
  margin-top: 32rem;
  margin-bottom: 32rem;
}

.ic-mx-3xl {
  margin-left: 32rem;
  margin-right: 32rem;
}

.ic-pa-4xl {
  padding: 64rem;
}

.ic-pl-4xl {
  padding-left: 64rem;
}

.ic-pr-4xl {
  padding-right: 64rem;
}

.ic-pb-4xl {
  padding-bottom: 64rem;
}

.ic-pt-4xl {
  padding-top: 64rem;
}

.ic-py-4xl {
  padding-top: 64rem;
  padding-bottom: 64rem;
}

.ic-px-4xl {
  padding-left: 64rem;
  padding-right: 64rem;
}

.ic-ma-4xl {
  margin: 64rem;
}

.ic-ml-4xl {
  margin-left: 64rem;
}

.ic-mr-4xl {
  margin-right: 64rem;
}

.ic-mb-4xl {
  margin-bottom: 64rem;
}

.ic-mt-4xl {
  margin-top: 64rem;
}

.ic-my-4xl {
  margin-top: 64rem;
  margin-bottom: 64rem;
}

.ic-mx-4xl {
  margin-left: 64rem;
  margin-right: 64rem;
}

.ic-pa-0 {
  padding: 0;
}

.ic-pl-0 {
  padding-left: 0;
}

.ic-pr-0 {
  padding-right: 0;
}

.ic-pb-0 {
  padding-bottom: 0;
}

.ic-pt-0 {
  padding-top: 0;
}

.ic-py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.ic-px-0 {
  padding-left: 0;
  padding-right: 0;
}

.ic-ma-0 {
  margin: 0;
}

.ic-ml-0 {
  margin-left: 0;
}

.ic-mr-0 {
  margin-right: 0;
}

.ic-mb-0 {
  margin-bottom: 0;
}

.ic-mt-0 {
  margin-top: 0;
}

.ic-my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.ic-mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.ic-pa-auto {
  padding: auto;
}

.ic-pl-auto {
  padding-left: auto;
}

.ic-pr-auto {
  padding-right: auto;
}

.ic-pb-auto {
  padding-bottom: auto;
}

.ic-pt-auto {
  padding-top: auto;
}

.ic-py-auto {
  padding-top: auto;
  padding-bottom: auto;
}

.ic-px-auto {
  padding-left: auto;
  padding-right: auto;
}

.ic-ma-auto {
  margin: auto;
}

.ic-ml-auto {
  margin-left: auto;
}

.ic-mr-auto {
  margin-right: auto;
}

.ic-mb-auto {
  margin-bottom: auto;
}

.ic-mt-auto {
  margin-top: auto;
}

.ic-my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.ic-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* WIDTHS, HEIGHTS */
.ic-w-3xs {
  width: var(--size-3xs);
}

.ic-max-w-3xs {
  max-width: var(--size-3xs);
}

.ic-min-w-3xs {
  min-width: var(--size-3xs);
}

.ic-w-2xs {
  width: var(--size-2xs);
}

.ic-max-w-2xs {
  max-width: var(--size-2xs);
}

.ic-min-w-2xs {
  min-width: var(--size-2xs);
}

.ic-w-xs {
  width: var(--size-xs);
}

.ic-max-w-xs {
  max-width: var(--size-xs);
}

.ic-min-w-xs {
  min-width: var(--size-xs);
}

.ic-w-s {
  width: var(--size-s);
}

.ic-max-w-s {
  max-width: var(--size-s);
}

.ic-min-w-s {
  min-width: var(--size-s);
}

.ic-w-m {
  width: var(--size-m);
}

.ic-max-w-m {
  max-width: var(--size-m);
}

.ic-min-w-m {
  min-width: var(--size-m);
}

.ic-w-l {
  width: var(--size-l);
}

.ic-max-w-l {
  max-width: var(--size-l);
}

.ic-min-w-l {
  min-width: var(--size-l);
}

.ic-w-xl {
  width: var(--size-xl);
}

.ic-max-w-xl {
  max-width: var(--size-xl);
}

.ic-min-w-xl {
  min-width: var(--size-xl);
}

.ic-w-2xl {
  width: var(--size-2xl);
}

.ic-max-w-2xl {
  max-width: var(--size-2xl);
}

.ic-min-w-2xl {
  min-width: var(--size-2xl);
}

.ic-w-3xl {
  width: var(--size-3xl);
}

.ic-max-w-3xl {
  max-width: var(--size-3xl);
}

.ic-min-w-3xl {
  min-width: var(--size-3xl);
}

.ic-w-4xl {
  width: var(--size-4xl);
}

.ic-max-w-4xl {
  max-width: var(--size-4xl);
}

.ic-min-w-4xl {
  min-width: var(--size-4xl);
}

.ic-w-25 {
  width: var(--size-25);
}

.ic-max-w-25 {
  max-width: var(--size-25);
}

.ic-min-w-25 {
  min-width: var(--size-25);
}

.ic-w-50 {
  width: var(--size-50);
}

.ic-max-w-50 {
  max-width: var(--size-50);
}

.ic-min-w-50 {
  min-width: var(--size-50);
}

.ic-w-75 {
  width: var(--size-75);
}

.ic-max-w-75 {
  max-width: var(--size-75);
}

.ic-min-w-75 {
  min-width: var(--size-75);
}

.ic-w-100 {
  width: var(--size-100);
}

.ic-max-w-100 {
  max-width: var(--size-100);
}

.ic-min-w-100 {
  min-width: var(--size-100);
}

.ic-w-third {
  width: var(--size-third);
}

.ic-max-w-third {
  max-width: var(--size-third);
}

.ic-min-w-third {
  min-width: var(--size-third);
}

.ic-w-two-thirds {
  width: var(--size-two-thirds);
}

.ic-max-w-two-thirds {
  max-width: var(--size-two-thirds);
}

.ic-min-w-two-thirds {
  min-width: var(--size-two-thirds);
}

.ic-w-0 {
  width: var(--size-0);
}

.ic-max-w-0 {
  max-width: var(--size-0);
}

.ic-min-w-0 {
  min-width: var(--size-0);
}

.ic-w-auto {
  width: var(--size-auto);
}

.ic-max-w-auto {
  max-width: var(--size-auto);
}

.ic-min-w-auto {
  min-width: var(--size-auto);
}

.ic-h-3xs {
  height: var(--size-3xs);
}

.ic-max-h-3xs {
  max-height: var(--size-3xs);
}

.ic-min-h-3xs {
  min-height: var(--size-3xs);
}

.ic-h-2xs {
  height: var(--size-2xs);
}

.ic-max-h-2xs {
  max-height: var(--size-2xs);
}

.ic-min-h-2xs {
  min-height: var(--size-2xs);
}

.ic-h-xs {
  height: var(--size-xs);
}

.ic-max-h-xs {
  max-height: var(--size-xs);
}

.ic-min-h-xs {
  min-height: var(--size-xs);
}

.ic-h-s {
  height: var(--size-s);
}

.ic-max-h-s {
  max-height: var(--size-s);
}

.ic-min-h-s {
  min-height: var(--size-s);
}

.ic-h-m {
  height: var(--size-m);
}

.ic-max-h-m {
  max-height: var(--size-m);
}

.ic-min-h-m {
  min-height: var(--size-m);
}

.ic-h-l {
  height: var(--size-l);
}

.ic-max-h-l {
  max-height: var(--size-l);
}

.ic-min-h-l {
  min-height: var(--size-l);
}

.ic-h-xl {
  height: var(--size-xl);
}

.ic-max-h-xl {
  max-height: var(--size-xl);
}

.ic-min-h-xl {
  min-height: var(--size-xl);
}

.ic-h-2xl {
  height: var(--size-2xl);
}

.ic-max-h-2xl {
  max-height: var(--size-2xl);
}

.ic-min-h-2xl {
  min-height: var(--size-2xl);
}

.ic-h-3xl {
  height: var(--size-3xl);
}

.ic-max-h-3xl {
  max-height: var(--size-3xl);
}

.ic-min-h-3xl {
  min-height: var(--size-3xl);
}

.ic-h-4xl {
  height: var(--size-4xl);
}

.ic-max-h-4xl {
  max-height: var(--size-4xl);
}

.ic-min-h-4xl {
  min-height: var(--size-4xl);
}

.ic-h-25 {
  height: var(--size-25);
}

.ic-max-h-25 {
  max-height: var(--size-25);
}

.ic-min-h-25 {
  min-height: var(--size-25);
}

.ic-h-50 {
  height: var(--size-50);
}

.ic-max-h-50 {
  max-height: var(--size-50);
}

.ic-min-h-50 {
  min-height: var(--size-50);
}

.ic-h-75 {
  height: var(--size-75);
}

.ic-max-h-75 {
  max-height: var(--size-75);
}

.ic-min-h-75 {
  min-height: var(--size-75);
}

.ic-h-100 {
  height: var(--size-100);
}

.ic-max-h-100 {
  max-height: var(--size-100);
}

.ic-min-h-100 {
  min-height: var(--size-100);
}

.ic-h-third {
  height: var(--size-third);
}

.ic-max-h-third {
  max-height: var(--size-third);
}

.ic-min-h-third {
  min-height: var(--size-third);
}

.ic-h-two-thirds {
  height: var(--size-two-thirds);
}

.ic-max-h-two-thirds {
  max-height: var(--size-two-thirds);
}

.ic-min-h-two-thirds {
  min-height: var(--size-two-thirds);
}

.ic-h-0 {
  height: var(--size-0);
}

.ic-max-h-0 {
  max-height: var(--size-0);
}

.ic-min-h-0 {
  min-height: var(--size-0);
}

.ic-h-auto {
  height: var(--size-auto);
}

.ic-max-h-auto {
  max-height: var(--size-auto);
}

.ic-min-h-auto {
  min-height: var(--size-auto);
}