@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
/* Third party Vendors */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Fonts */
/*
Noto Sans supports:
  font-weight: {anything between 100 and 900}
  font-stretch: {anything between 62.5% and 100%}
  font-style: {normal or italic}
*/
/*
  Noto Serif supports:
  font-weight: {anything between 100 and 900}
  font-stretch: {anything between 62.5% and 100%}
  font-style: {normal or italic}
*/
/* Noto Sans and Noto Serif */
/*
  See all icons at: https://lucide.dev/icons/
  Icons extracted from https://unpkg.com/lucide-static@1.21.0/font/lucide.css
  The CDN provided selectors did not use a prefix to avoid naming conflicts
  Current version: 1.21.0
*/
/* Lucide Icons */
@font-face {
  font-family: 'lucide';
  src: url('https://unpkg.com/lucide-static@1.21.0/font/lucide.eot?t=1781765884348'); /* IE9*/
  src:
    url('https://unpkg.com/lucide-static@1.21.0/font/lucide.eot?t=1781765884348#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('https://unpkg.com/lucide-static@1.21.0/font/lucide.woff2?t=1781765884348') format('woff2'),
    url('https://unpkg.com/lucide-static@1.21.0/font/lucide.woff?t=1781765884348') format('woff'),
    url('https://unpkg.com/lucide-static@1.21.0/font/lucide.ttf?t=1781765884348') format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('https://unpkg.com/lucide-static@1.21.0/font/lucide.svg?t=1781765884348#lucide') format('svg'); /* iOS 4.1- */
}
.li {
  font-family: 'lucide' !important;
  font-size: var(--__op-icon-font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
}
.li-a-arrow-down::before {
  content: '\e585';
}
.li-a-arrow-up::before {
  content: '\e586';
}
.li-a-large-small::before {
  content: '\e587';
}
.li-accessibility::before {
  content: '\e297';
}
.li-activity-square::before {
  content: '\e4b4';
}
.li-activity::before {
  content: '\e038';
}
.li-ad::before {
  content: '\e700';
}
.li-air-vent::before {
  content: '\e34d';
}
.li-airplay::before {
  content: '\e039';
}
.li-alarm-check::before {
  content: '\e1ec';
}
.li-alarm-clock-check::before {
  content: '\e1ec';
}
.li-alarm-clock-minus::before {
  content: '\e1ed';
}
.li-alarm-clock-off::before {
  content: '\e23b';
}
.li-alarm-clock-plus::before {
  content: '\e1ee';
}
.li-alarm-clock::before {
  content: '\e03a';
}
.li-alarm-minus::before {
  content: '\e1ed';
}
.li-alarm-plus::before {
  content: '\e1ee';
}
.li-alarm-smoke::before {
  content: '\e57b';
}
.li-album::before {
  content: '\e03b';
}
.li-alert-circle::before {
  content: '\e077';
}
.li-alert-octagon::before {
  content: '\e127';
}
.li-alert-triangle::before {
  content: '\e193';
}
.li-align-center-horizontal::before {
  content: '\e26c';
}
.li-align-center-vertical::before {
  content: '\e26d';
}
.li-align-center::before {
  content: '\e182';
}
.li-align-end-horizontal::before {
  content: '\e26e';
}
.li-align-end-vertical::before {
  content: '\e26f';
}
.li-align-horizontal-distribute-center::before {
  content: '\e03c';
}
.li-align-horizontal-distribute-end::before {
  content: '\e03d';
}
.li-align-horizontal-distribute-start::before {
  content: '\e03e';
}
.li-align-horizontal-justify-center::before {
  content: '\e272';
}
.li-align-horizontal-justify-end::before {
  content: '\e273';
}
.li-align-horizontal-justify-start::before {
  content: '\e274';
}
.li-align-horizontal-space-around::before {
  content: '\e275';
}
.li-align-horizontal-space-between::before {
  content: '\e276';
}
.li-align-justify::before {
  content: '\e184';
}
.li-align-left::before {
  content: '\e185';
}
.li-align-right::before {
  content: '\e183';
}
.li-align-start-horizontal::before {
  content: '\e270';
}
.li-align-start-vertical::before {
  content: '\e271';
}
.li-align-vertical-distribute-center::before {
  content: '\e27e';
}
.li-align-vertical-distribute-end::before {
  content: '\e27f';
}
.li-align-vertical-distribute-start::before {
  content: '\e280';
}
.li-align-vertical-justify-center::before {
  content: '\e277';
}
.li-align-vertical-justify-end::before {
  content: '\e278';
}
.li-align-vertical-justify-start::before {
  content: '\e279';
}
.li-align-vertical-space-around::before {
  content: '\e27a';
}
.li-align-vertical-space-between::before {
  content: '\e27b';
}
.li-ambulance::before {
  content: '\e5bb';
}
.li-ampersand::before {
  content: '\e49c';
}
.li-ampersands::before {
  content: '\e49d';
}
.li-amphora::before {
  content: '\e61b';
}
.li-anchor::before {
  content: '\e03f';
}
.li-angry::before {
  content: '\e2fc';
}
.li-annoyed::before {
  content: '\e2fd';
}
.li-antenna::before {
  content: '\e4e2';
}
.li-anvil::before {
  content: '\e580';
}
.li-aperture::before {
  content: '\e040';
}
.li-app-window-mac::before {
  content: '\e5d2';
}
.li-app-window::before {
  content: '\e426';
}
.li-apple::before {
  content: '\e34e';
}
.li-archive-restore::before {
  content: '\e2cd';
}
.li-archive-x::before {
  content: '\e50c';
}
.li-archive::before {
  content: '\e041';
}
.li-area-chart::before {
  content: '\e4d3';
}
.li-armchair::before {
  content: '\e2c0';
}
.li-arrow-big-down-dash::before {
  content: '\e41d';
}
.li-arrow-big-down::before {
  content: '\e1e1';
}
.li-arrow-big-left-dash::before {
  content: '\e41e';
}
.li-arrow-big-left::before {
  content: '\e1e2';
}
.li-arrow-big-right-dash::before {
  content: '\e41f';
}
.li-arrow-big-right::before {
  content: '\e1e3';
}
.li-arrow-big-up-dash::before {
  content: '\e420';
}
.li-arrow-big-up::before {
  content: '\e1e4';
}
.li-arrow-down-0-1::before {
  content: '\e413';
}
.li-arrow-down-01::before {
  content: '\e413';
}
.li-arrow-down-1-0::before {
  content: '\e414';
}
.li-arrow-down-10::before {
  content: '\e414';
}
.li-arrow-down-a-z::before {
  content: '\e415';
}
.li-arrow-down-az::before {
  content: '\e415';
}
.li-arrow-down-circle::before {
  content: '\e078';
}
.li-arrow-down-from-line::before {
  content: '\e454';
}
.li-arrow-down-left-from-circle::before {
  content: '\e3f7';
}
.li-arrow-down-left-from-square::before {
  content: '\e5a1';
}
.li-arrow-down-left-square::before {
  content: '\e4b5';
}
.li-arrow-down-left::before {
  content: '\e043';
}
.li-arrow-down-narrow-wide::before {
  content: '\e044';
}
.li-arrow-down-right-from-circle::before {
  content: '\e3f8';
}
.li-arrow-down-right-from-square::before {
  content: '\e5a2';
}
.li-arrow-down-right-square::before {
  content: '\e4b6';
}
.li-arrow-down-right::before {
  content: '\e045';
}
.li-arrow-down-square::before {
  content: '\e427';
}
.li-arrow-down-to-dot::before {
  content: '\e44d';
}
.li-arrow-down-to-line::before {
  content: '\e455';
}
.li-arrow-down-up::before {
  content: '\e046';
}
.li-arrow-down-wide-narrow::before {
  content: '\e047';
}
.li-arrow-down-z-a::before {
  content: '\e416';
}
.li-arrow-down-za::before {
  content: '\e416';
}
.li-arrow-down::before {
  content: '\e042';
}
.li-arrow-left-circle::before {
  content: '\e079';
}
.li-arrow-left-from-line::before {
  content: '\e456';
}
.li-arrow-left-right::before {
  content: '\e24a';
}
.li-arrow-left-square::before {
  content: '\e428';
}
.li-arrow-left-to-line::before {
  content: '\e457';
}
.li-arrow-left::before {
  content: '\e048';
}
.li-arrow-right-circle::before {
  content: '\e07a';
}
.li-arrow-right-from-line::before {
  content: '\e458';
}
.li-arrow-right-left::before {
  content: '\e417';
}
.li-arrow-right-square::before {
  content: '\e429';
}
.li-arrow-right-to-line::before {
  content: '\e459';
}
.li-arrow-right::before {
  content: '\e049';
}
.li-arrow-up-0-1::before {
  content: '\e418';
}
.li-arrow-up-01::before {
  content: '\e418';
}
.li-arrow-up-1-0::before {
  content: '\e419';
}
.li-arrow-up-10::before {
  content: '\e419';
}
.li-arrow-up-a-z::before {
  content: '\e41a';
}
.li-arrow-up-az::before {
  content: '\e41a';
}
.li-arrow-up-circle::before {
  content: '\e07b';
}
.li-arrow-up-down::before {
  content: '\e37d';
}
.li-arrow-up-from-dot::before {
  content: '\e44e';
}
.li-arrow-up-from-line::before {
  content: '\e45a';
}
.li-arrow-up-left-from-circle::before {
  content: '\e3f9';
}
.li-arrow-up-left-from-square::before {
  content: '\e5a3';
}
.li-arrow-up-left-square::before {
  content: '\e4b7';
}
.li-arrow-up-left::before {
  content: '\e04b';
}
.li-arrow-up-narrow-wide::before {
  content: '\e04c';
}
.li-arrow-up-right-from-circle::before {
  content: '\e3fa';
}
.li-arrow-up-right-from-square::before {
  content: '\e5a4';
}
.li-arrow-up-right-square::before {
  content: '\e4b8';
}
.li-arrow-up-right::before {
  content: '\e04d';
}
.li-arrow-up-square::before {
  content: '\e42a';
}
.li-arrow-up-to-line::before {
  content: '\e45b';
}
.li-arrow-up-wide-narrow::before {
  content: '\e41b';
}
.li-arrow-up-z-a::before {
  content: '\e41c';
}
.li-arrow-up-za::before {
  content: '\e41c';
}
.li-arrow-up::before {
  content: '\e04a';
}
.li-arrows-up-from-line::before {
  content: '\e4d4';
}
.li-asterisk-square::before {
  content: '\e168';
}
.li-asterisk::before {
  content: '\e1ef';
}
.li-astroid::before {
  content: '\e6f0';
}
.li-at-sign::before {
  content: '\e04e';
}
.li-atom::before {
  content: '\e3d7';
}
.li-audio-lines::before {
  content: '\e55a';
}
.li-audio-waveform::before {
  content: '\e55b';
}
.li-award::before {
  content: '\e04f';
}
.li-axe::before {
  content: '\e050';
}
.li-axis-3-d::before {
  content: '\e2fe';
}
.li-axis-3d::before {
  content: '\e2fe';
}
.li-baby::before {
  content: '\e2ce';
}
.li-backpack::before {
  content: '\e2c8';
}
.li-badge-alert::before {
  content: '\e475';
}
.li-badge-cent::before {
  content: '\e50f';
}
.li-badge-check::before {
  content: '\e241';
}
.li-badge-dollar-sign::before {
  content: '\e476';
}
.li-badge-euro::before {
  content: '\e510';
}
.li-badge-help::before {
  content: '\e47b';
}
.li-badge-indian-rupee::before {
  content: '\e511';
}
.li-badge-info::before {
  content: '\e477';
}
.li-badge-japanese-yen::before {
  content: '\e512';
}
.li-badge-minus::before {
  content: '\e478';
}
.li-badge-percent::before {
  content: '\e479';
}
.li-badge-plus::before {
  content: '\e47a';
}
.li-badge-pound-sterling::before {
  content: '\e513';
}
.li-badge-question-mark::before {
  content: '\e47b';
}
.li-badge-russian-ruble::before {
  content: '\e514';
}
.li-badge-swiss-franc::before {
  content: '\e515';
}
.li-badge-turkish-lira::before {
  content: '\e67e';
}
.li-badge-x::before {
  content: '\e47c';
}
.li-badge::before {
  content: '\e474';
}
.li-baggage-claim::before {
  content: '\e2c9';
}
.li-balloon::before {
  content: '\e6af';
}
.li-ban::before {
  content: '\e051';
}
.li-banana::before {
  content: '\e34f';
}
.li-bandage::before {
  content: '\e61d';
}
.li-banknote-arrow-down::before {
  content: '\e64c';
}
.li-banknote-arrow-up::before {
  content: '\e64d';
}
.li-banknote-check::before {
  content: '\e70c';
}
.li-banknote-x::before {
  content: '\e64e';
}
.li-banknote::before {
  content: '\e052';
}
.li-bar-chart-2::before {
  content: '\e068';
}
.li-bar-chart-3::before {
  content: '\e2a3';
}
.li-bar-chart-4::before {
  content: '\e2a4';
}
.li-bar-chart-big::before {
  content: '\e4a9';
}
.li-bar-chart-horizontal-big::before {
  content: '\e4a7';
}
.li-bar-chart-horizontal::before {
  content: '\e2a2';
}
.li-bar-chart::before {
  content: '\e06a';
}
.li-barcode::before {
  content: '\e533';
}
.li-barrel::before {
  content: '\e675';
}
.li-baseline::before {
  content: '\e285';
}
.li-bath::before {
  content: '\e2ab';
}
.li-battery-charging::before {
  content: '\e054';
}
.li-battery-full::before {
  content: '\e055';
}
.li-battery-low::before {
  content: '\e056';
}
.li-battery-medium::before {
  content: '\e057';
}
.li-battery-plus::before {
  content: '\e63e';
}
.li-battery-warning::before {
  content: '\e3ac';
}
.li-battery::before {
  content: '\e053';
}
.li-beaker::before {
  content: '\e058';
}
.li-bean-off::before {
  content: '\e390';
}
.li-bean::before {
  content: '\e38f';
}
.li-bed-double::before {
  content: '\e2c2';
}
.li-bed-single::before {
  content: '\e2c3';
}
.li-bed::before {
  content: '\e2c1';
}
.li-beef-off::before {
  content: '\e6dc';
}
.li-beef::before {
  content: '\e3a5';
}
.li-beer-off::before {
  content: '\e5d9';
}
.li-beer::before {
  content: '\e2cf';
}
.li-bell-check::before {
  content: '\e6ef';
}
.li-bell-dot::before {
  content: '\e42b';
}
.li-bell-electric::before {
  content: '\e57c';
}
.li-bell-minus::before {
  content: '\e1f0';
}
.li-bell-off::before {
  content: '\e05a';
}
.li-bell-plus::before {
  content: '\e1f1';
}
.li-bell-ring::before {
  content: '\e224';
}
.li-bell::before {
  content: '\e059';
}
.li-between-horizonal-end::before {
  content: '\e591';
}
.li-between-horizonal-start::before {
  content: '\e592';
}
.li-between-horizontal-end::before {
  content: '\e591';
}
.li-between-horizontal-start::before {
  content: '\e592';
}
.li-between-vertical-end::before {
  content: '\e593';
}
.li-between-vertical-start::before {
  content: '\e594';
}
.li-biceps-flexed::before {
  content: '\e5eb';
}
.li-bike::before {
  content: '\e1d2';
}
.li-binary::before {
  content: '\e1f2';
}
.li-binoculars::before {
  content: '\e621';
}
.li-biohazard::before {
  content: '\e441';
}
.li-bird::before {
  content: '\e3c5';
}
.li-birdhouse::before {
  content: '\e69a';
}
.li-bitcoin::before {
  content: '\e05b';
}
.li-blend::before {
  content: '\e59c';
}
.li-blender::before {
  content: '\e6f4';
}
.li-blinds::before {
  content: '\e3c0';
}
.li-blocks::before {
  content: '\e4fa';
}
.li-bluetooth-connected::before {
  content: '\e1b8';
}
.li-bluetooth-off::before {
  content: '\e1b9';
}
.li-bluetooth-searching::before {
  content: '\e1ba';
}
.li-bluetooth::before {
  content: '\e05c';
}
.li-bold::before {
  content: '\e05d';
}
.li-bolt::before {
  content: '\e58c';
}
.li-bomb::before {
  content: '\e2ff';
}
.li-bone-fracture::before {
  content: '\e715';
}
.li-bone::before {
  content: '\e358';
}
.li-book-a::before {
  content: '\e544';
}
.li-book-alert::before {
  content: '\e672';
}
.li-book-audio::before {
  content: '\e545';
}
.li-book-check::before {
  content: '\e546';
}
.li-book-copy::before {
  content: '\e3ec';
}
.li-book-dashed::before {
  content: '\e3ed';
}
.li-book-down::before {
  content: '\e3ee';
}
.li-book-headphones::before {
  content: '\e547';
}
.li-book-heart::before {
  content: '\e548';
}
.li-book-image::before {
  content: '\e549';
}
.li-book-key::before {
  content: '\e3ef';
}
.li-book-lock::before {
  content: '\e3f0';
}
.li-book-marked::before {
  content: '\e3f1';
}
.li-book-minus::before {
  content: '\e3f2';
}
.li-book-open-check::before {
  content: '\e381';
}
.li-book-open-text::before {
  content: '\e54a';
}
.li-book-open::before {
  content: '\e05f';
}
.li-book-plus::before {
  content: '\e3f3';
}
.li-book-search::before {
  content: '\e6ab';
}
.li-book-template::before {
  content: '\e3ed';
}
.li-book-text::before {
  content: '\e54b';
}
.li-book-type::before {
  content: '\e54c';
}
.li-book-up-2::before {
  content: '\e4a6';
}
.li-book-up::before {
  content: '\e3f4';
}
.li-book-user::before {
  content: '\e54d';
}
.li-book-x::before {
  content: '\e3f5';
}
.li-book::before {
  content: '\e05e';
}
.li-bookmark-check::before {
  content: '\e51f';
}
.li-bookmark-minus::before {
  content: '\e23c';
}
.li-bookmark-off::before {
  content: '\e6df';
}
.li-bookmark-plus::before {
  content: '\e23d';
}
.li-bookmark-x::before {
  content: '\e520';
}
.li-bookmark::before {
  content: '\e060';
}
.li-boom-box::before {
  content: '\e4ee';
}
.li-bot-message-square::before {
  content: '\e5ce';
}
.li-bot-off::before {
  content: '\e5e0';
}
.li-bot::before {
  content: '\e1bb';
}
.li-bottle-wine::before {
  content: '\e67b';
}
.li-bow-arrow::before {
  content: '\e65e';
}
.li-box-select::before {
  content: '\e1cb';
}
.li-box::before {
  content: '\e061';
}
.li-boxes::before {
  content: '\e2d0';
}
.li-braces::before {
  content: '\e36a';
}
.li-brackets::before {
  content: '\e443';
}
.li-brain-circuit::before {
  content: '\e3c7';
}
.li-brain-cog::before {
  content: '\e3c8';
}
.li-brain::before {
  content: '\e3c6';
}
.li-brick-wall-fire::before {
  content: '\e653';
}
.li-brick-wall-shield::before {
  content: '\e690';
}
.li-brick-wall::before {
  content: '\e581';
}
.li-briefcase-business::before {
  content: '\e5d5';
}
.li-briefcase-conveyor-belt::before {
  content: '\e62b';
}
.li-briefcase-medical::before {
  content: '\e5d6';
}
.li-briefcase::before {
  content: '\e062';
}
.li-bring-to-front::before {
  content: '\e4ef';
}
.li-broccoli::before {
  content: '\e6f5';
}
.li-brush-cleaning::before {
  content: '\e666';
}
.li-brush::before {
  content: '\e1d3';
}
.li-bubbles::before {
  content: '\e654';
}
.li-bug-off::before {
  content: '\e50d';
}
.li-bug-play::before {
  content: '\e50e';
}
.li-bug::before {
  content: '\e20c';
}
.li-building-2::before {
  content: '\e290';
}
.li-building::before {
  content: '\e1cc';
}
.li-bus-front::before {
  content: '\e4fb';
}
.li-bus::before {
  content: '\e1d4';
}
.li-cable-car::before {
  content: '\e4fc';
}
.li-cable::before {
  content: '\e4e3';
}
.li-cake-slice::before {
  content: '\e4b9';
}
.li-cake::before {
  content: '\e344';
}
.li-calculator::before {
  content: '\e1bc';
}
.li-calendar-1::before {
  content: '\e630';
}
.li-calendar-arrow-down::before {
  content: '\e5fe';
}
.li-calendar-arrow-up::before {
  content: '\e5ff';
}
.li-calendar-check-2::before {
  content: '\e2b8';
}
.li-calendar-check::before {
  content: '\e2b7';
}
.li-calendar-clock::before {
  content: '\e304';
}
.li-calendar-cog::before {
  content: '\e5ed';
}
.li-calendar-days::before {
  content: '\e2b9';
}
.li-calendar-fold::before {
  content: '\e5b4';
}
.li-calendar-heart::before {
  content: '\e305';
}
.li-calendar-minus-2::before {
  content: '\e5b5';
}
.li-calendar-minus::before {
  content: '\e2ba';
}
.li-calendar-off::before {
  content: '\e2bb';
}
.li-calendar-plus-2::before {
  content: '\e5b6';
}
.li-calendar-plus::before {
  content: '\e2bc';
}
.li-calendar-range::before {
  content: '\e2bd';
}
.li-calendar-search::before {
  content: '\e306';
}
.li-calendar-sync::before {
  content: '\e636';
}
.li-calendar-x-2::before {
  content: '\e2bf';
}
.li-calendar-x::before {
  content: '\e2be';
}
.li-calendar::before {
  content: '\e063';
}
.li-calendars::before {
  content: '\e6a7';
}
.li-camera-off::before {
  content: '\e065';
}
.li-camera::before {
  content: '\e064';
}
.li-candlestick-chart::before {
  content: '\e4a8';
}
.li-candy-cane::before {
  content: '\e4ba';
}
.li-candy-off::before {
  content: '\e392';
}
.li-candy::before {
  content: '\e391';
}
.li-cannabis-off::before {
  content: '\e6e0';
}
.li-cannabis::before {
  content: '\e5d4';
}
.li-captions-off::before {
  content: '\e5c1';
}
.li-captions::before {
  content: '\e3a4';
}
.li-car-front::before {
  content: '\e4fd';
}
.li-car-taxi-front::before {
  content: '\e4fe';
}
.li-car::before {
  content: '\e1d5';
}
.li-caravan::before {
  content: '\e539';
}
.li-card-sim::before {
  content: '\e671';
}
.li-carrot::before {
  content: '\e25a';
}
.li-case-lower::before {
  content: '\e3d8';
}
.li-case-sensitive::before {
  content: '\e3d9';
}
.li-case-upper::before {
  content: '\e3da';
}
.li-cassette-tape::before {
  content: '\e4ca';
}
.li-cast::before {
  content: '\e066';
}
.li-castle::before {
  content: '\e3e0';
}
.li-cat::before {
  content: '\e38c';
}
.li-cctv-off::before {
  content: '\e6d8';
}
.li-cctv::before {
  content: '\e57d';
}
.li-chart-area::before {
  content: '\e4d3';
}
.li-chart-bar-big::before {
  content: '\e4a7';
}
.li-chart-bar-decreasing::before {
  content: '\e607';
}
.li-chart-bar-increasing::before {
  content: '\e608';
}
.li-chart-bar-stacked::before {
  content: '\e609';
}
.li-chart-bar::before {
  content: '\e2a2';
}
.li-chart-candlestick::before {
  content: '\e4a8';
}
.li-chart-column-big::before {
  content: '\e4a9';
}
.li-chart-column-decreasing::before {
  content: '\e067';
}
.li-chart-column-increasing::before {
  content: '\e2a4';
}
.li-chart-column-stacked::before {
  content: '\e60a';
}
.li-chart-column::before {
  content: '\e2a3';
}
.li-chart-gantt::before {
  content: '\e624';
}
.li-chart-line::before {
  content: '\e2a5';
}
.li-chart-network::before {
  content: '\e60b';
}
.li-chart-no-axes-column-decreasing::before {
  content: '\e069';
}
.li-chart-no-axes-column-increasing::before {
  content: '\e06a';
}
.li-chart-no-axes-column::before {
  content: '\e068';
}
.li-chart-no-axes-combined::before {
  content: '\e60c';
}
.li-chart-no-axes-gantt::before {
  content: '\e4c4';
}
.li-chart-pie::before {
  content: '\e06b';
}
.li-chart-scatter::before {
  content: '\e48a';
}
.li-chart-spline::before {
  content: '\e60d';
}
.li-check-check::before {
  content: '\e38e';
}
.li-check-circle-2::before {
  content: '\e226';
}
.li-check-circle::before {
  content: '\e07c';
}
.li-check-line::before {
  content: '\e66b';
}
.li-check-square-2::before {
  content: '\e559';
}
.li-check-square::before {
  content: '\e16a';
}
.li-check::before {
  content: '\e06c';
}
.li-chef-hat::before {
  content: '\e2ac';
}
.li-cherry::before {
  content: '\e350';
}
.li-chess-bishop::before {
  content: '\e6a0';
}
.li-chess-king::before {
  content: '\e6a1';
}
.li-chess-knight::before {
  content: '\e6a2';
}
.li-chess-pawn::before {
  content: '\e6a3';
}
.li-chess-queen::before {
  content: '\e6a4';
}
.li-chess-rook::before {
  content: '\e6a5';
}
.li-chevron-down-circle::before {
  content: '\e4dd';
}
.li-chevron-down-square::before {
  content: '\e3cf';
}
.li-chevron-down::before {
  content: '\e06d';
}
.li-chevron-first::before {
  content: '\e243';
}
.li-chevron-last::before {
  content: '\e244';
}
.li-chevron-left-circle::before {
  content: '\e4de';
}
.li-chevron-left-square::before {
  content: '\e3d0';
}
.li-chevron-left::before {
  content: '\e06e';
}
.li-chevron-right-circle::before {
  content: '\e4df';
}
.li-chevron-right-square::before {
  content: '\e3d1';
}
.li-chevron-right::before {
  content: '\e06f';
}
.li-chevron-up-circle::before {
  content: '\e4e0';
}
.li-chevron-up-square::before {
  content: '\e3d2';
}
.li-chevron-up::before {
  content: '\e070';
}
.li-chevrons-down-up::before {
  content: '\e228';
}
.li-chevrons-down::before {
  content: '\e071';
}
.li-chevrons-left-right-ellipsis::before {
  content: '\e61f';
}
.li-chevrons-left-right::before {
  content: '\e293';
}
.li-chevrons-left::before {
  content: '\e072';
}
.li-chevrons-right-left::before {
  content: '\e294';
}
.li-chevrons-right::before {
  content: '\e073';
}
.li-chevrons-up-down::before {
  content: '\e211';
}
.li-chevrons-up::before {
  content: '\e074';
}
.li-church::before {
  content: '\e3e1';
}
.li-cigarette-off::before {
  content: '\e2c7';
}
.li-cigarette::before {
  content: '\e2c6';
}
.li-circle-alert::before {
  content: '\e077';
}
.li-circle-arrow-down::before {
  content: '\e078';
}
.li-circle-arrow-left::before {
  content: '\e079';
}
.li-circle-arrow-out-down-left::before {
  content: '\e3f7';
}
.li-circle-arrow-out-down-right::before {
  content: '\e3f8';
}
.li-circle-arrow-out-up-left::before {
  content: '\e3f9';
}
.li-circle-arrow-out-up-right::before {
  content: '\e3fa';
}
.li-circle-arrow-right::before {
  content: '\e07a';
}
.li-circle-arrow-up::before {
  content: '\e07b';
}
.li-circle-check-big::before {
  content: '\e07c';
}
.li-circle-check::before {
  content: '\e226';
}
.li-circle-chevron-down::before {
  content: '\e4dd';
}
.li-circle-chevron-left::before {
  content: '\e4de';
}
.li-circle-chevron-right::before {
  content: '\e4df';
}
.li-circle-chevron-up::before {
  content: '\e4e0';
}
.li-circle-dashed::before {
  content: '\e4b0';
}
.li-circle-divide::before {
  content: '\e07d';
}
.li-circle-dollar-sign::before {
  content: '\e47d';
}
.li-circle-dot-dashed::before {
  content: '\e4b1';
}
.li-circle-dot::before {
  content: '\e345';
}
.li-circle-ellipsis::before {
  content: '\e346';
}
.li-circle-equal::before {
  content: '\e400';
}
.li-circle-fading-arrow-up::before {
  content: '\e618';
}
.li-circle-fading-plus::before {
  content: '\e5bc';
}
.li-circle-gauge::before {
  content: '\e4e1';
}
.li-circle-help::before {
  content: '\e082';
}
.li-circle-minus::before {
  content: '\e07e';
}
.li-circle-off::before {
  content: '\e401';
}
.li-circle-parking-off::before {
  content: '\e3ca';
}
.li-circle-parking::before {
  content: '\e3c9';
}
.li-circle-pause::before {
  content: '\e07f';
}
.li-circle-percent::before {
  content: '\e51a';
}
.li-circle-pile::before {
  content: '\e6e1';
}
.li-circle-play::before {
  content: '\e080';
}
.li-circle-plus::before {
  content: '\e081';
}
.li-circle-pound-sterling::before {
  content: '\e66d';
}
.li-circle-power::before {
  content: '\e550';
}
.li-circle-question-mark::before {
  content: '\e082';
}
.li-circle-slash-2::before {
  content: '\e213';
}
.li-circle-slash::before {
  content: '\e402';
}
.li-circle-slashed::before {
  content: '\e213';
}
.li-circle-small::before {
  content: '\e640';
}
.li-circle-star::before {
  content: '\e68d';
}
.li-circle-stop::before {
  content: '\e083';
}
.li-circle-user-round::before {
  content: '\e462';
}
.li-circle-user::before {
  content: '\e461';
}
.li-circle-x::before {
  content: '\e084';
}
.li-circle::before {
  content: '\e076';
}
.li-circuit-board::before {
  content: '\e403';
}
.li-citrus::before {
  content: '\e375';
}
.li-clapperboard::before {
  content: '\e29b';
}
.li-clipboard-check::before {
  content: '\e219';
}
.li-clipboard-clock::before {
  content: '\e688';
}
.li-clipboard-copy::before {
  content: '\e225';
}
.li-clipboard-edit::before {
  content: '\e307';
}
.li-clipboard-list::before {
  content: '\e086';
}
.li-clipboard-minus::before {
  content: '\e5be';
}
.li-clipboard-paste::before {
  content: '\e3e8';
}
.li-clipboard-pen-line::before {
  content: '\e308';
}
.li-clipboard-pen::before {
  content: '\e307';
}
.li-clipboard-plus::before {
  content: '\e5bf';
}
.li-clipboard-signature::before {
  content: '\e308';
}
.li-clipboard-type::before {
  content: '\e309';
}
.li-clipboard-x::before {
  content: '\e222';
}
.li-clipboard::before {
  content: '\e085';
}
.li-clock-1::before {
  content: '\e24b';
}
.li-clock-10::before {
  content: '\e24c';
}
.li-clock-11::before {
  content: '\e24d';
}
.li-clock-12::before {
  content: '\e24e';
}
.li-clock-2::before {
  content: '\e24f';
}
.li-clock-3::before {
  content: '\e250';
}
.li-clock-4::before {
  content: '\e251';
}
.li-clock-5::before {
  content: '\e252';
}
.li-clock-6::before {
  content: '\e253';
}
.li-clock-7::before {
  content: '\e254';
}
.li-clock-8::before {
  content: '\e255';
}
.li-clock-9::before {
  content: '\e256';
}
.li-clock-alert::before {
  content: '\e62a';
}
.li-clock-arrow-down::before {
  content: '\e600';
}
.li-clock-arrow-left::before {
  content: '\e70d';
}
.li-clock-arrow-right::before {
  content: '\e70e';
}
.li-clock-arrow-up::before {
  content: '\e601';
}
.li-clock-check::before {
  content: '\e69e';
}
.li-clock-fading::before {
  content: '\e64a';
}
.li-clock-plus::before {
  content: '\e667';
}
.li-clock::before {
  content: '\e087';
}
.li-closed-caption::before {
  content: '\e68a';
}
.li-cloud-alert::before {
  content: '\e633';
}
.li-cloud-backup::before {
  content: '\e6e2';
}
.li-cloud-check::before {
  content: '\e66e';
}
.li-cloud-cog::before {
  content: '\e30a';
}
.li-cloud-download::before {
  content: '\e089';
}
.li-cloud-drizzle::before {
  content: '\e08a';
}
.li-cloud-fog::before {
  content: '\e214';
}
.li-cloud-hail::before {
  content: '\e08b';
}
.li-cloud-lightning::before {
  content: '\e08c';
}
.li-cloud-moon-rain::before {
  content: '\e2fa';
}
.li-cloud-moon::before {
  content: '\e215';
}
.li-cloud-off::before {
  content: '\e08d';
}
.li-cloud-rain-wind::before {
  content: '\e08f';
}
.li-cloud-rain::before {
  content: '\e08e';
}
.li-cloud-snow::before {
  content: '\e090';
}
.li-cloud-sun-rain::before {
  content: '\e2fb';
}
.li-cloud-sun::before {
  content: '\e216';
}
.li-cloud-sync::before {
  content: '\e6e3';
}
.li-cloud-upload::before {
  content: '\e091';
}
.li-cloud::before {
  content: '\e088';
}
.li-cloudy::before {
  content: '\e217';
}
.li-clover::before {
  content: '\e092';
}
.li-club::before {
  content: '\e496';
}
.li-code-2::before {
  content: '\e206';
}
.li-code-square::before {
  content: '\e16b';
}
.li-code-xml::before {
  content: '\e206';
}
.li-code::before {
  content: '\e093';
}
.li-coffee::before {
  content: '\e096';
}
.li-cog::before {
  content: '\e30b';
}
.li-coins::before {
  content: '\e097';
}
.li-columns-2::before {
  content: '\e098';
}
.li-columns-3-cog::before {
  content: '\e661';
}
.li-columns-3::before {
  content: '\e099';
}
.li-columns-4::before {
  content: '\e589';
}
.li-columns-settings::before {
  content: '\e661';
}
.li-columns::before {
  content: '\e098';
}
.li-combine::before {
  content: '\e44c';
}
.li-command::before {
  content: '\e09a';
}
.li-compass::before {
  content: '\e09b';
}
.li-component::before {
  content: '\e2ad';
}
.li-computer::before {
  content: '\e4e4';
}
.li-concierge-bell::before {
  content: '\e378';
}
.li-cone::before {
  content: '\e523';
}
.li-construction::before {
  content: '\e3b4';
}
.li-contact-2::before {
  content: '\e463';
}
.li-contact-round::before {
  content: '\e463';
}
.li-contact::before {
  content: '\e09c';
}
.li-container::before {
  content: '\e4d5';
}
.li-contrast::before {
  content: '\e09d';
}
.li-cookie::before {
  content: '\e26b';
}
.li-cooking-pot::before {
  content: '\e584';
}
.li-copy-check::before {
  content: '\e3fb';
}
.li-copy-minus::before {
  content: '\e3fc';
}
.li-copy-plus::before {
  content: '\e3fd';
}
.li-copy-slash::before {
  content: '\e3fe';
}
.li-copy-x::before {
  content: '\e3ff';
}
.li-copy::before {
  content: '\e09e';
}
.li-copyleft::before {
  content: '\e09f';
}
.li-copyright::before {
  content: '\e0a0';
}
.li-corner-down-left::before {
  content: '\e0a1';
}
.li-corner-down-right::before {
  content: '\e0a2';
}
.li-corner-left-down::before {
  content: '\e0a3';
}
.li-corner-left-up::before {
  content: '\e0a4';
}
.li-corner-right-down::before {
  content: '\e0a5';
}
.li-corner-right-up::before {
  content: '\e0a6';
}
.li-corner-up-left::before {
  content: '\e0a7';
}
.li-corner-up-right::before {
  content: '\e0a8';
}
.li-cpu::before {
  content: '\e0a9';
}
.li-creative-commons::before {
  content: '\e3b2';
}
.li-credit-card::before {
  content: '\e0aa';
}
.li-croissant::before {
  content: '\e2ae';
}
.li-crop::before {
  content: '\e0ab';
}
.li-cross::before {
  content: '\e1e5';
}
.li-crosshair::before {
  content: '\e0ac';
}
.li-crown::before {
  content: '\e1d6';
}
.li-cuboid::before {
  content: '\e524';
}
.li-cup-soda::before {
  content: '\e2d1';
}
.li-curly-braces::before {
  content: '\e36a';
}
.li-currency::before {
  content: '\e230';
}
.li-cylinder::before {
  content: '\e525';
}
.li-dam::before {
  content: '\e606';
}
.li-database-backup::before {
  content: '\e3ab';
}
.li-database-search::before {
  content: '\e6b1';
}
.li-database-zap::before {
  content: '\e50b';
}
.li-database::before {
  content: '\e0ad';
}
.li-decimals-arrow-left::before {
  content: '\e65c';
}
.li-decimals-arrow-right::before {
  content: '\e65d';
}
.li-delete::before {
  content: '\e0ae';
}
.li-dessert::before {
  content: '\e4bb';
}
.li-diameter::before {
  content: '\e526';
}
.li-diamond-minus::before {
  content: '\e5e1';
}
.li-diamond-percent::before {
  content: '\e51b';
}
.li-diamond-plus::before {
  content: '\e5e2';
}
.li-diamond::before {
  content: '\e2d2';
}
.li-dice-1::before {
  content: '\e287';
}
.li-dice-2::before {
  content: '\e288';
}
.li-dice-3::before {
  content: '\e289';
}
.li-dice-4::before {
  content: '\e28a';
}
.li-dice-5::before {
  content: '\e28b';
}
.li-dice-6::before {
  content: '\e28c';
}
.li-dices::before {
  content: '\e2c5';
}
.li-diff::before {
  content: '\e30c';
}
.li-disc-2::before {
  content: '\e3f6';
}
.li-disc-3::before {
  content: '\e494';
}
.li-disc-album::before {
  content: '\e55c';
}
.li-disc::before {
  content: '\e0af';
}
.li-divide-circle::before {
  content: '\e07d';
}
.li-divide-square::before {
  content: '\e16d';
}
.li-divide::before {
  content: '\e0b0';
}
.li-dna-off::before {
  content: '\e394';
}
.li-dna::before {
  content: '\e393';
}
.li-dock::before {
  content: '\e5d3';
}
.li-dog::before {
  content: '\e38d';
}
.li-dollar-sign::before {
  content: '\e0b1';
}
.li-donut::before {
  content: '\e4bc';
}
.li-door-closed-locked::before {
  content: '\e664';
}
.li-door-closed::before {
  content: '\e3d5';
}
.li-door-open::before {
  content: '\e3d6';
}
.li-dot-square::before {
  content: '\e16e';
}
.li-dot::before {
  content: '\e44f';
}
.li-download-cloud::before {
  content: '\e089';
}
.li-download::before {
  content: '\e0b2';
}
.li-drafting-compass::before {
  content: '\e527';
}
.li-drama::before {
  content: '\e521';
}
.li-drill::before {
  content: '\e58d';
}
.li-drone::before {
  content: '\e676';
}
.li-droplet-off::before {
  content: '\e638';
}
.li-droplet::before {
  content: '\e0b4';
}
.li-droplets::before {
  content: '\e0b5';
}
.li-drum::before {
  content: '\e55d';
}
.li-drumstick::before {
  content: '\e25b';
}
.li-dumbbell::before {
  content: '\e3a1';
}
.li-ear-off::before {
  content: '\e383';
}
.li-ear::before {
  content: '\e382';
}
.li-earth-lock::before {
  content: '\e5cc';
}
.li-earth::before {
  content: '\e1f3';
}
.li-eclipse::before {
  content: '\e59d';
}
.li-edit-2::before {
  content: '\e12f';
}
.li-edit-3::before {
  content: '\e130';
}
.li-edit::before {
  content: '\e172';
}
.li-egg-fried::before {
  content: '\e351';
}
.li-egg-off::before {
  content: '\e395';
}
.li-egg::before {
  content: '\e25d';
}
.li-ellipse::before {
  content: '\e6b2';
}
.li-ellipsis-vertical::before {
  content: '\e0b7';
}
.li-ellipsis::before {
  content: '\e0b6';
}
.li-equal-approximately::before {
  content: '\e634';
}
.li-equal-not::before {
  content: '\e1be';
}
.li-equal-square::before {
  content: '\e16f';
}
.li-equal::before {
  content: '\e1bd';
}
.li-eraser::before {
  content: '\e28f';
}
.li-ethernet-port::before {
  content: '\e620';
}
.li-euro::before {
  content: '\e0b8';
}
.li-ev-charger::before {
  content: '\e697';
}
.li-expand::before {
  content: '\e21a';
}
.li-external-link::before {
  content: '\e0b9';
}
.li-eye-closed::before {
  content: '\e62e';
}
.li-eye-dashed::before {
  content: '\e701';
}
.li-eye-off::before {
  content: '\e0bb';
}
.li-eye::before {
  content: '\e0ba';
}
.li-factory::before {
  content: '\e29f';
}
.li-fan::before {
  content: '\e379';
}
.li-fast-forward::before {
  content: '\e0bd';
}
.li-feather::before {
  content: '\e0be';
}
.li-fence::before {
  content: '\e582';
}
.li-ferris-wheel::before {
  content: '\e47f';
}
.li-file-archive::before {
  content: '\e30d';
}
.li-file-audio-2::before {
  content: '\e31a';
}
.li-file-audio::before {
  content: '\e31a';
}
.li-file-axis-3-d::before {
  content: '\e30e';
}
.li-file-axis-3d::before {
  content: '\e30e';
}
.li-file-badge-2::before {
  content: '\e30f';
}
.li-file-badge::before {
  content: '\e30f';
}
.li-file-bar-chart-2::before {
  content: '\e311';
}
.li-file-bar-chart::before {
  content: '\e312';
}
.li-file-box::before {
  content: '\e310';
}
.li-file-braces-corner::before {
  content: '\e36c';
}
.li-file-braces::before {
  content: '\e36b';
}
.li-file-chart-column-increasing::before {
  content: '\e312';
}
.li-file-chart-column::before {
  content: '\e311';
}
.li-file-chart-line::before {
  content: '\e313';
}
.li-file-chart-pie::before {
  content: '\e314';
}
.li-file-check-2::before {
  content: '\e0c2';
}
.li-file-check-corner::before {
  content: '\e0c2';
}
.li-file-check::before {
  content: '\e0c1';
}
.li-file-clock::before {
  content: '\e315';
}
.li-file-code-2::before {
  content: '\e45e';
}
.li-file-code-corner::before {
  content: '\e45e';
}
.li-file-code::before {
  content: '\e0c3';
}
.li-file-cog-2::before {
  content: '\e316';
}
.li-file-cog::before {
  content: '\e316';
}
.li-file-diff::before {
  content: '\e317';
}
.li-file-digit::before {
  content: '\e0c4';
}
.li-file-down::before {
  content: '\e318';
}
.li-file-edit::before {
  content: '\e31f';
}
.li-file-exclamation-point::before {
  content: '\e319';
}
.li-file-headphone::before {
  content: '\e31a';
}
.li-file-heart::before {
  content: '\e31b';
}
.li-file-image::before {
  content: '\e31c';
}
.li-file-input::before {
  content: '\e0c5';
}
.li-file-json-2::before {
  content: '\e36c';
}
.li-file-json::before {
  content: '\e36b';
}
.li-file-key-2::before {
  content: '\e31d';
}
.li-file-key::before {
  content: '\e31d';
}
.li-file-line-chart::before {
  content: '\e313';
}
.li-file-lock-2::before {
  content: '\e31e';
}
.li-file-lock::before {
  content: '\e31e';
}
.li-file-minus-2::before {
  content: '\e0c7';
}
.li-file-minus-corner::before {
  content: '\e0c7';
}
.li-file-minus::before {
  content: '\e0c6';
}
.li-file-music::before {
  content: '\e55e';
}
.li-file-output::before {
  content: '\e0c8';
}
.li-file-pen-line::before {
  content: '\e320';
}
.li-file-pen::before {
  content: '\e31f';
}
.li-file-pie-chart::before {
  content: '\e314';
}
.li-file-play::before {
  content: '\e321';
}
.li-file-plus-2::before {
  content: '\e0ca';
}
.li-file-plus-corner::before {
  content: '\e0ca';
}
.li-file-plus::before {
  content: '\e0c9';
}
.li-file-question-mark::before {
  content: '\e322';
}
.li-file-question::before {
  content: '\e322';
}
.li-file-scan::before {
  content: '\e323';
}
.li-file-search-2::before {
  content: '\e324';
}
.li-file-search-corner::before {
  content: '\e324';
}
.li-file-search::before {
  content: '\e0cb';
}
.li-file-signal::before {
  content: '\e325';
}
.li-file-signature::before {
  content: '\e320';
}
.li-file-sliders::before {
  content: '\e5a0';
}
.li-file-spreadsheet::before {
  content: '\e326';
}
.li-file-stack::before {
  content: '\e4a1';
}
.li-file-symlink::before {
  content: '\e327';
}
.li-file-terminal::before {
  content: '\e328';
}
.li-file-text::before {
  content: '\e0cc';
}
.li-file-type-2::before {
  content: '\e36d';
}
.li-file-type-corner::before {
  content: '\e36d';
}
.li-file-type::before {
  content: '\e329';
}
.li-file-up::before {
  content: '\e32a';
}
.li-file-user::before {
  content: '\e62d';
}
.li-file-video-2::before {
  content: '\e32b';
}
.li-file-video-camera::before {
  content: '\e32b';
}
.li-file-video::before {
  content: '\e321';
}
.li-file-volume-2::before {
  content: '\e325';
}
.li-file-volume::before {
  content: '\e32c';
}
.li-file-warning::before {
  content: '\e319';
}
.li-file-x-2::before {
  content: '\e0ce';
}
.li-file-x-corner::before {
  content: '\e0ce';
}
.li-file-x::before {
  content: '\e0cd';
}
.li-file::before {
  content: '\e0c0';
}
.li-files::before {
  content: '\e0cf';
}
.li-film::before {
  content: '\e0d0';
}
.li-filter-x::before {
  content: '\e3b5';
}
.li-filter::before {
  content: '\e0dc';
}
.li-fingerprint-pattern::before {
  content: '\e2cb';
}
.li-fingerprint::before {
  content: '\e2cb';
}
.li-fire-extinguisher::before {
  content: '\e57e';
}
.li-fish-off::before {
  content: '\e3b0';
}
.li-fish-symbol::before {
  content: '\e4f4';
}
.li-fish::before {
  content: '\e3a6';
}
.li-fishing-hook::before {
  content: '\e6e4';
}
.li-fishing-rod::before {
  content: '\e6b3';
}
.li-flag-off::before {
  content: '\e292';
}
.li-flag-triangle-left::before {
  content: '\e237';
}
.li-flag-triangle-right::before {
  content: '\e238';
}
.li-flag::before {
  content: '\e0d1';
}
.li-flame-kindling::before {
  content: '\e53a';
}
.li-flame::before {
  content: '\e0d2';
}
.li-flashlight-off::before {
  content: '\e0d4';
}
.li-flashlight::before {
  content: '\e0d3';
}
.li-flask-conical-off::before {
  content: '\e396';
}
.li-flask-conical::before {
  content: '\e0d5';
}
.li-flask-round::before {
  content: '\e0d6';
}
.li-flip-horizontal-2::before {
  content: '\e35e';
}
.li-flip-horizontal::before {
  content: '\e35d';
}
.li-flip-vertical-2::before {
  content: '\e360';
}
.li-flip-vertical::before {
  content: '\e35f';
}
.li-flower-2::before {
  content: '\e2d4';
}
.li-flower::before {
  content: '\e2d3';
}
.li-focus::before {
  content: '\e29e';
}
.li-fold-horizontal::before {
  content: '\e43b';
}
.li-fold-vertical::before {
  content: '\e43c';
}
.li-folder-archive::before {
  content: '\e32d';
}
.li-folder-bookmark::before {
  content: '\e6f1';
}
.li-folder-check::before {
  content: '\e32e';
}
.li-folder-clock::before {
  content: '\e32f';
}
.li-folder-closed::before {
  content: '\e330';
}
.li-folder-code::before {
  content: '\e5fb';
}
.li-folder-cog-2::before {
  content: '\e331';
}
.li-folder-cog::before {
  content: '\e331';
}
.li-folder-dot::before {
  content: '\e4c5';
}
.li-folder-down::before {
  content: '\e332';
}
.li-folder-edit::before {
  content: '\e338';
}
.li-folder-git-2::before {
  content: '\e40a';
}
.li-folder-git::before {
  content: '\e409';
}
.li-folder-heart::before {
  content: '\e333';
}
.li-folder-input::before {
  content: '\e334';
}
.li-folder-kanban::before {
  content: '\e4c6';
}
.li-folder-key::before {
  content: '\e335';
}
.li-folder-lock::before {
  content: '\e336';
}
.li-folder-minus::before {
  content: '\e0d8';
}
.li-folder-open-dot::before {
  content: '\e4c7';
}
.li-folder-open::before {
  content: '\e247';
}
.li-folder-output::before {
  content: '\e337';
}
.li-folder-pen::before {
  content: '\e338';
}
.li-folder-plus::before {
  content: '\e0d9';
}
.li-folder-root::before {
  content: '\e4c8';
}
.li-folder-search-2::before {
  content: '\e33a';
}
.li-folder-search::before {
  content: '\e339';
}
.li-folder-symlink::before {
  content: '\e33b';
}
.li-folder-sync::before {
  content: '\e4c9';
}
.li-folder-tree::before {
  content: '\e33c';
}
.li-folder-up::before {
  content: '\e33d';
}
.li-folder-x::before {
  content: '\e33e';
}
.li-folder::before {
  content: '\e0d7';
}
.li-folders::before {
  content: '\e33f';
}
.li-footprints::before {
  content: '\e3b9';
}
.li-fork-knife-crossed::before {
  content: '\e2f7';
}
.li-fork-knife::before {
  content: '\e2f6';
}
.li-forklift::before {
  content: '\e3c1';
}
.li-form-input::before {
  content: '\e21f';
}
.li-form::before {
  content: '\e6a8';
}
.li-forward::before {
  content: '\e229';
}
.li-frame::before {
  content: '\e291';
}
.li-frown::before {
  content: '\e0db';
}
.li-fuel::before {
  content: '\e2af';
}
.li-fullscreen::before {
  content: '\e534';
}
.li-function-square::before {
  content: '\e22d';
}
.li-funnel-plus::before {
  content: '\e0dd';
}
.li-funnel-x::before {
  content: '\e3b5';
}
.li-funnel::before {
  content: '\e0dc';
}
.li-gallery-horizontal-end::before {
  content: '\e4cf';
}
.li-gallery-horizontal::before {
  content: '\e4ce';
}
.li-gallery-thumbnails::before {
  content: '\e4d0';
}
.li-gallery-vertical-end::before {
  content: '\e4d2';
}
.li-gallery-vertical::before {
  content: '\e4d1';
}
.li-gamepad-2::before {
  content: '\e0df';
}
.li-gamepad-directional::before {
  content: '\e69b';
}
.li-gamepad::before {
  content: '\e0de';
}
.li-gantt-chart-square::before {
  content: '\e169';
}
.li-gantt-chart::before {
  content: '\e4c4';
}
.li-gauge-circle::before {
  content: '\e4e1';
}
.li-gauge::before {
  content: '\e1bf';
}
.li-gavel::before {
  content: '\e0e0';
}
.li-gem::before {
  content: '\e242';
}
.li-georgian-lari::before {
  content: '\e678';
}
.li-ghost::before {
  content: '\e20e';
}
.li-gift::before {
  content: '\e0e1';
}
.li-git-branch-minus::before {
  content: '\e69c';
}
.li-git-branch-plus::before {
  content: '\e1f4';
}
.li-git-branch::before {
  content: '\e0e2';
}
.li-git-commit-horizontal::before {
  content: '\e0e3';
}
.li-git-commit-vertical::before {
  content: '\e552';
}
.li-git-commit::before {
  content: '\e0e3';
}
.li-git-compare-arrows::before {
  content: '\e553';
}
.li-git-compare::before {
  content: '\e359';
}
.li-git-fork::before {
  content: '\e28d';
}
.li-git-graph::before {
  content: '\e554';
}
.li-git-merge-conflict::before {
  content: '\e6b4';
}
.li-git-merge::before {
  content: '\e0e4';
}
.li-git-pull-request-arrow::before {
  content: '\e555';
}
.li-git-pull-request-closed::before {
  content: '\e35a';
}
.li-git-pull-request-create-arrow::before {
  content: '\e557';
}
.li-git-pull-request-create::before {
  content: '\e556';
}
.li-git-pull-request-draft::before {
  content: '\e35b';
}
.li-git-pull-request::before {
  content: '\e0e5';
}
.li-glass-water::before {
  content: '\e2d5';
}
.li-glasses::before {
  content: '\e20d';
}
.li-globe-2::before {
  content: '\e1f3';
}
.li-globe-check::before {
  content: '\e6fc';
}
.li-globe-lock::before {
  content: '\e5cd';
}
.li-globe-off::before {
  content: '\e6b5';
}
.li-globe-x::before {
  content: '\e6b6';
}
.li-globe::before {
  content: '\e0e8';
}
.li-goal::before {
  content: '\e4a5';
}
.li-gpu::before {
  content: '\e66a';
}
.li-grab::before {
  content: '\e1e6';
}
.li-graduation-cap::before {
  content: '\e234';
}
.li-grape::before {
  content: '\e352';
}
.li-grid-2-x-2-check::before {
  content: '\e5e4';
}
.li-grid-2-x-2-plus::before {
  content: '\e628';
}
.li-grid-2-x-2-x::before {
  content: '\e5e5';
}
.li-grid-2-x-2::before {
  content: '\e4ff';
}
.li-grid-2x2-check::before {
  content: '\e5e4';
}
.li-grid-2x2-plus::before {
  content: '\e628';
}
.li-grid-2x2-x::before {
  content: '\e5e5';
}
.li-grid-2x2::before {
  content: '\e4ff';
}
.li-grid-3-x-3::before {
  content: '\e0e9';
}
.li-grid-3x2::before {
  content: '\e66f';
}
.li-grid-3x3::before {
  content: '\e0e9';
}
.li-grid::before {
  content: '\e0e9';
}
.li-grip-horizontal::before {
  content: '\e0ea';
}
.li-grip-vertical::before {
  content: '\e0eb';
}
.li-grip::before {
  content: '\e3b1';
}
.li-group::before {
  content: '\e464';
}
.li-guitar::before {
  content: '\e55f';
}
.li-ham::before {
  content: '\e5d7';
}
.li-hamburger::before {
  content: '\e665';
}
.li-hammer::before {
  content: '\e0ec';
}
.li-hand-coins::before {
  content: '\e5b8';
}
.li-hand-fist::before {
  content: '\e68b';
}
.li-hand-grab::before {
  content: '\e1e6';
}
.li-hand-heart::before {
  content: '\e5b9';
}
.li-hand-helping::before {
  content: '\e3b8';
}
.li-hand-metal::before {
  content: '\e22c';
}
.li-hand-platter::before {
  content: '\e5ba';
}
.li-hand::before {
  content: '\e1d7';
}
.li-handbag::before {
  content: '\e689';
}
.li-handshake::before {
  content: '\e5c0';
}
.li-hard-drive-download::before {
  content: '\e4e5';
}
.li-hard-drive-upload::before {
  content: '\e4e6';
}
.li-hard-drive::before {
  content: '\e0ed';
}
.li-hard-hat::before {
  content: '\e0ee';
}
.li-hash::before {
  content: '\e0ef';
}
.li-hat-glasses::before {
  content: '\e683';
}
.li-haze::before {
  content: '\e0f0';
}
.li-hd::before {
  content: '\e6e5';
}
.li-hdmi-port::before {
  content: '\e4e7';
}
.li-heading-1::before {
  content: '\e385';
}
.li-heading-2::before {
  content: '\e386';
}
.li-heading-3::before {
  content: '\e387';
}
.li-heading-4::before {
  content: '\e388';
}
.li-heading-5::before {
  content: '\e389';
}
.li-heading-6::before {
  content: '\e38a';
}
.li-heading::before {
  content: '\e384';
}
.li-headphone-off::before {
  content: '\e629';
}
.li-headphones::before {
  content: '\e0f1';
}
.li-headset::before {
  content: '\e5bd';
}
.li-heart-crack::before {
  content: '\e2d6';
}
.li-heart-handshake::before {
  content: '\e2d7';
}
.li-heart-minus::before {
  content: '\e651';
}
.li-heart-off::before {
  content: '\e295';
}
.li-heart-plus::before {
  content: '\e652';
}
.li-heart-pulse::before {
  content: '\e36e';
}
.li-heart-x::before {
  content: '\e6ed';
}
.li-heart::before {
  content: '\e0f2';
}
.li-heater::before {
  content: '\e58e';
}
.li-helicopter::before {
  content: '\e69d';
}
.li-help-circle::before {
  content: '\e082';
}
.li-helping-hand::before {
  content: '\e3b8';
}
.li-hexagon::before {
  content: '\e0f3';
}
.li-highlighter::before {
  content: '\e0f4';
}
.li-history::before {
  content: '\e1f5';
}
.li-home::before {
  content: '\e0f5';
}
.li-hop-off::before {
  content: '\e398';
}
.li-hop::before {
  content: '\e397';
}
.li-hospital::before {
  content: '\e5d8';
}
.li-hotel::before {
  content: '\e3e2';
}
.li-hourglass::before {
  content: '\e296';
}
.li-house-heart::before {
  content: '\e695';
}
.li-house-plug::before {
  content: '\e5f0';
}
.li-house-plus::before {
  content: '\e5f1';
}
.li-house-wifi::before {
  content: '\e63c';
}
.li-house::before {
  content: '\e0f5';
}
.li-ice-cream-2::before {
  content: '\e3a7';
}
.li-ice-cream-bowl::before {
  content: '\e3a7';
}
.li-ice-cream-cone::before {
  content: '\e353';
}
.li-ice-cream::before {
  content: '\e353';
}
.li-id-card-lanyard::before {
  content: '\e670';
}
.li-id-card::before {
  content: '\e617';
}
.li-image-down::before {
  content: '\e53c';
}
.li-image-minus::before {
  content: '\e1f6';
}
.li-image-off::before {
  content: '\e1c0';
}
.li-image-play::before {
  content: '\e5df';
}
.li-image-plus::before {
  content: '\e1f7';
}
.li-image-up::before {
  content: '\e5cb';
}
.li-image-upscale::before {
  content: '\e637';
}
.li-image::before {
  content: '\e0f6';
}
.li-images::before {
  content: '\e5c4';
}
.li-import::before {
  content: '\e22f';
}
.li-inbox::before {
  content: '\e0f7';
}
.li-indent-decrease::before {
  content: '\e107';
}
.li-indent-increase::before {
  content: '\e108';
}
.li-indent::before {
  content: '\e108';
}
.li-indian-rupee::before {
  content: '\e0f8';
}
.li-infinity::before {
  content: '\e1e7';
}
.li-info::before {
  content: '\e0f9';
}
.li-inspect::before {
  content: '\e202';
}
.li-inspection-panel::before {
  content: '\e583';
}
.li-italic::before {
  content: '\e0fb';
}
.li-iteration-ccw::before {
  content: '\e423';
}
.li-iteration-cw::before {
  content: '\e424';
}
.li-japanese-yen::before {
  content: '\e0fc';
}
.li-joystick::before {
  content: '\e355';
}
.li-kanban-square-dashed::before {
  content: '\e16c';
}
.li-kanban-square::before {
  content: '\e170';
}
.li-kanban::before {
  content: '\e4dc';
}
.li-kayak::before {
  content: '\e68f';
}
.li-key-round::before {
  content: '\e4a3';
}
.li-key-square::before {
  content: '\e4a4';
}
.li-key::before {
  content: '\e0fd';
}
.li-keyboard-music::before {
  content: '\e560';
}
.li-keyboard-off::before {
  content: '\e5de';
}
.li-keyboard::before {
  content: '\e284';
}
.li-lamp-ceiling::before {
  content: '\e2d9';
}
.li-lamp-desk::before {
  content: '\e2da';
}
.li-lamp-floor::before {
  content: '\e2db';
}
.li-lamp-wall-down::before {
  content: '\e2dc';
}
.li-lamp-wall-up::before {
  content: '\e2dd';
}
.li-lamp::before {
  content: '\e2d8';
}
.li-land-plot::before {
  content: '\e528';
}
.li-landmark::before {
  content: '\e23a';
}
.li-languages::before {
  content: '\e0fe';
}
.li-laptop-2::before {
  content: '\e1d8';
}
.li-laptop-minimal-check::before {
  content: '\e632';
}
.li-laptop-minimal::before {
  content: '\e1d8';
}
.li-laptop::before {
  content: '\e1cd';
}
.li-lasso-select::before {
  content: '\e1cf';
}
.li-lasso::before {
  content: '\e1ce';
}
.li-laugh::before {
  content: '\e300';
}
.li-layers-2::before {
  content: '\e52a';
}
.li-layers-3::before {
  content: '\e529';
}
.li-layers-minus::before {
  content: '\e6ee';
}
.li-layers-plus::before {
  content: '\e6e6';
}
.li-layers::before {
  content: '\e529';
}
.li-layout-dashboard::before {
  content: '\e1c1';
}
.li-layout-grid::before {
  content: '\e0ff';
}
.li-layout-list::before {
  content: '\e1d9';
}
.li-layout-panel-left::before {
  content: '\e470';
}
.li-layout-panel-top::before {
  content: '\e471';
}
.li-layout-template::before {
  content: '\e207';
}
.li-layout::before {
  content: '\e12c';
}
.li-leaf::before {
  content: '\e2de';
}
.li-leafy-green::before {
  content: '\e46f';
}
.li-lectern::before {
  content: '\e5e9';
}
.li-lens-concave::before {
  content: '\e6b7';
}
.li-lens-convex::before {
  content: '\e6b8';
}
.li-letter-text::before {
  content: '\e605';
}
.li-library-big::before {
  content: '\e54e';
}
.li-library-square::before {
  content: '\e54f';
}
.li-library::before {
  content: '\e100';
}
.li-life-buoy::before {
  content: '\e101';
}
.li-ligature::before {
  content: '\e43a';
}
.li-lightbulb-off::before {
  content: '\e208';
}
.li-lightbulb::before {
  content: '\e1c2';
}
.li-line-chart::before {
  content: '\e2a5';
}
.li-line-dot-right-horizontal::before {
  content: '\e6b9';
}
.li-line-squiggle::before {
  content: '\e67a';
}
.li-line-style::before {
  content: '\e6da';
}
.li-link-2-off::before {
  content: '\e104';
}
.li-link-2::before {
  content: '\e103';
}
.li-link::before {
  content: '\e102';
}
.li-list-check::before {
  content: '\e5fa';
}
.li-list-checks::before {
  content: '\e1d0';
}
.li-list-chevrons-down-up::before {
  content: '\e694';
}
.li-list-chevrons-up-down::before {
  content: '\e696';
}
.li-list-collapse::before {
  content: '\e59b';
}
.li-list-end::before {
  content: '\e2df';
}
.li-list-filter-plus::before {
  content: '\e639';
}
.li-list-filter::before {
  content: '\e460';
}
.li-list-indent-decrease::before {
  content: '\e107';
}
.li-list-indent-increase::before {
  content: '\e108';
}
.li-list-minus::before {
  content: '\e23e';
}
.li-list-music::before {
  content: '\e2e0';
}
.li-list-ordered::before {
  content: '\e1d1';
}
.li-list-plus::before {
  content: '\e23f';
}
.li-list-restart::before {
  content: '\e452';
}
.li-list-sort-ascending::before {
  content: '\e702';
}
.li-list-sort-descending::before {
  content: '\e703';
}
.li-list-start::before {
  content: '\e2e1';
}
.li-list-todo::before {
  content: '\e4c3';
}
.li-list-tree::before {
  content: '\e408';
}
.li-list-video::before {
  content: '\e2e2';
}
.li-list-x::before {
  content: '\e240';
}
.li-list::before {
  content: '\e106';
}
.li-loader-2::before {
  content: '\e10a';
}
.li-loader-circle::before {
  content: '\e10a';
}
.li-loader-pinwheel::before {
  content: '\e5e6';
}
.li-loader::before {
  content: '\e109';
}
.li-locate-fixed::before {
  content: '\e1db';
}
.li-locate-off::before {
  content: '\e282';
}
.li-locate::before {
  content: '\e1da';
}
.li-location-edit::before {
  content: '\e655';
}
.li-lock-keyhole-open::before {
  content: '\e532';
}
.li-lock-keyhole::before {
  content: '\e531';
}
.li-lock-open::before {
  content: '\e10c';
}
.li-lock::before {
  content: '\e10b';
}
.li-log-in::before {
  content: '\e10d';
}
.li-log-out::before {
  content: '\e10e';
}
.li-logs::before {
  content: '\e5f4';
}
.li-lollipop::before {
  content: '\e4bd';
}
.li-luggage::before {
  content: '\e2ca';
}
.li-m-square::before {
  content: '\e503';
}
.li-magnet::before {
  content: '\e2b5';
}
.li-mail-check::before {
  content: '\e361';
}
.li-mail-minus::before {
  content: '\e362';
}
.li-mail-open::before {
  content: '\e363';
}
.li-mail-plus::before {
  content: '\e364';
}
.li-mail-question-mark::before {
  content: '\e365';
}
.li-mail-question::before {
  content: '\e365';
}
.li-mail-search::before {
  content: '\e366';
}
.li-mail-warning::before {
  content: '\e367';
}
.li-mail-x::before {
  content: '\e368';
}
.li-mail::before {
  content: '\e10f';
}
.li-mailbox::before {
  content: '\e3d4';
}
.li-mails::before {
  content: '\e369';
}
.li-map-minus::before {
  content: '\e686';
}
.li-map-pin-check-inside::before {
  content: '\e610';
}
.li-map-pin-check::before {
  content: '\e60f';
}
.li-map-pin-house::before {
  content: '\e61c';
}
.li-map-pin-minus-inside::before {
  content: '\e612';
}
.li-map-pin-minus::before {
  content: '\e611';
}
.li-map-pin-off::before {
  content: '\e2a6';
}
.li-map-pin-pen::before {
  content: '\e655';
}
.li-map-pin-plus-inside::before {
  content: '\e614';
}
.li-map-pin-plus::before {
  content: '\e613';
}
.li-map-pin-search::before {
  content: '\e6de';
}
.li-map-pin-x-inside::before {
  content: '\e616';
}
.li-map-pin-x::before {
  content: '\e615';
}
.li-map-pin::before {
  content: '\e111';
}
.li-map-pinned::before {
  content: '\e53d';
}
.li-map-plus::before {
  content: '\e63f';
}
.li-map::before {
  content: '\e110';
}
.li-mars-stroke::before {
  content: '\e642';
}
.li-mars::before {
  content: '\e641';
}
.li-martini::before {
  content: '\e2e3';
}
.li-maximize-2::before {
  content: '\e113';
}
.li-maximize::before {
  content: '\e112';
}
.li-medal::before {
  content: '\e36f';
}
.li-megaphone-off::before {
  content: '\e370';
}
.li-megaphone::before {
  content: '\e235';
}
.li-meh::before {
  content: '\e114';
}
.li-memory-stick::before {
  content: '\e445';
}
.li-menu-square::before {
  content: '\e453';
}
.li-menu::before {
  content: '\e115';
}
.li-merge::before {
  content: '\e43f';
}
.li-message-circle-check::before {
  content: '\e6ba';
}
.li-message-circle-code::before {
  content: '\e562';
}
.li-message-circle-dashed::before {
  content: '\e563';
}
.li-message-circle-heart::before {
  content: '\e564';
}
.li-message-circle-more::before {
  content: '\e565';
}
.li-message-circle-off::before {
  content: '\e566';
}
.li-message-circle-plus::before {
  content: '\e567';
}
.li-message-circle-question-mark::before {
  content: '\e568';
}
.li-message-circle-question::before {
  content: '\e568';
}
.li-message-circle-reply::before {
  content: '\e569';
}
.li-message-circle-warning::before {
  content: '\e56a';
}
.li-message-circle-x::before {
  content: '\e56b';
}
.li-message-circle::before {
  content: '\e116';
}
.li-message-square-check::before {
  content: '\e6bb';
}
.li-message-square-code::before {
  content: '\e56c';
}
.li-message-square-dashed::before {
  content: '\e40b';
}
.li-message-square-diff::before {
  content: '\e56d';
}
.li-message-square-dot::before {
  content: '\e56e';
}
.li-message-square-heart::before {
  content: '\e56f';
}
.li-message-square-lock::before {
  content: '\e62c';
}
.li-message-square-more::before {
  content: '\e570';
}
.li-message-square-off::before {
  content: '\e571';
}
.li-message-square-plus::before {
  content: '\e40c';
}
.li-message-square-quote::before {
  content: '\e572';
}
.li-message-square-reply::before {
  content: '\e573';
}
.li-message-square-share::before {
  content: '\e574';
}
.li-message-square-text::before {
  content: '\e575';
}
.li-message-square-warning::before {
  content: '\e576';
}
.li-message-square-x::before {
  content: '\e577';
}
.li-message-square::before {
  content: '\e117';
}
.li-messages-square::before {
  content: '\e40d';
}
.li-metronome::before {
  content: '\e6bc';
}
.li-mic-2::before {
  content: '\e349';
}
.li-mic-off::before {
  content: '\e119';
}
.li-mic-vocal::before {
  content: '\e349';
}
.li-mic::before {
  content: '\e118';
}
.li-microchip::before {
  content: '\e61a';
}
.li-microscope::before {
  content: '\e2e4';
}
.li-microwave::before {
  content: '\e37a';
}
.li-milestone::before {
  content: '\e298';
}
.li-milk-off::before {
  content: '\e39a';
}
.li-milk::before {
  content: '\e399';
}
.li-minimize-2::before {
  content: '\e11b';
}
.li-minimize::before {
  content: '\e11a';
}
.li-minus-circle::before {
  content: '\e07e';
}
.li-minus-square::before {
  content: '\e171';
}
.li-minus::before {
  content: '\e11c';
}
.li-mirror-rectangular::before {
  content: '\e6bd';
}
.li-mirror-round::before {
  content: '\e6be';
}
.li-monitor-check::before {
  content: '\e482';
}
.li-monitor-cloud::before {
  content: '\e699';
}
.li-monitor-cog::before {
  content: '\e603';
}
.li-monitor-dot::before {
  content: '\e483';
}
.li-monitor-down::before {
  content: '\e421';
}
.li-monitor-off::before {
  content: '\e1dc';
}
.li-monitor-pause::before {
  content: '\e484';
}
.li-monitor-play::before {
  content: '\e485';
}
.li-monitor-smartphone::before {
  content: '\e3a2';
}
.li-monitor-speaker::before {
  content: '\e210';
}
.li-monitor-stop::before {
  content: '\e486';
}
.li-monitor-up::before {
  content: '\e422';
}
.li-monitor-x::before {
  content: '\e487';
}
.li-monitor::before {
  content: '\e11d';
}
.li-moon-star::before {
  content: '\e410';
}
.li-moon::before {
  content: '\e11e';
}
.li-more-horizontal::before {
  content: '\e0b6';
}
.li-more-vertical::before {
  content: '\e0b7';
}
.li-motorbike::before {
  content: '\e698';
}
.li-mountain-snow::before {
  content: '\e232';
}
.li-mountain::before {
  content: '\e231';
}
.li-mouse-left::before {
  content: '\e6bf';
}
.li-mouse-off::before {
  content: '\e5db';
}
.li-mouse-pointer-2-off::before {
  content: '\e6a6';
}
.li-mouse-pointer-2::before {
  content: '\e1c3';
}
.li-mouse-pointer-ban::before {
  content: '\e5e7';
}
.li-mouse-pointer-click::before {
  content: '\e120';
}
.li-mouse-pointer-square-dashed::before {
  content: '\e509';
}
.li-mouse-pointer::before {
  content: '\e11f';
}
.li-mouse-right::before {
  content: '\e6c0';
}
.li-mouse::before {
  content: '\e28e';
}
.li-move-3-d::before {
  content: '\e2e5';
}
.li-move-3d::before {
  content: '\e2e5';
}
.li-move-diagonal-2::before {
  content: '\e1c5';
}
.li-move-diagonal::before {
  content: '\e1c4';
}
.li-move-down-left::before {
  content: '\e48d';
}
.li-move-down-right::before {
  content: '\e48e';
}
.li-move-down::before {
  content: '\e48c';
}
.li-move-horizontal::before {
  content: '\e1c6';
}
.li-move-left::before {
  content: '\e48f';
}
.li-move-right::before {
  content: '\e490';
}
.li-move-up-left::before {
  content: '\e492';
}
.li-move-up-right::before {
  content: '\e493';
}
.li-move-up::before {
  content: '\e491';
}
.li-move-vertical::before {
  content: '\e1c7';
}
.li-move::before {
  content: '\e121';
}
.li-music-2::before {
  content: '\e34a';
}
.li-music-3::before {
  content: '\e34b';
}
.li-music-4::before {
  content: '\e34c';
}
.li-music::before {
  content: '\e122';
}
.li-navigation-2-off::before {
  content: '\e2a7';
}
.li-navigation-2::before {
  content: '\e124';
}
.li-navigation-off::before {
  content: '\e2a8';
}
.li-navigation::before {
  content: '\e123';
}
.li-network::before {
  content: '\e125';
}
.li-newspaper::before {
  content: '\e348';
}
.li-nfc::before {
  content: '\e3c3';
}
.li-non-binary::before {
  content: '\e643';
}
.li-notebook-pen::before {
  content: '\e596';
}
.li-notebook-tabs::before {
  content: '\e597';
}
.li-notebook-text::before {
  content: '\e598';
}
.li-notebook::before {
  content: '\e595';
}
.li-notepad-text-dashed::before {
  content: '\e59a';
}
.li-notepad-text::before {
  content: '\e599';
}
.li-nut-off::before {
  content: '\e39c';
}
.li-nut::before {
  content: '\e39b';
}
.li-octagon-alert::before {
  content: '\e127';
}
.li-octagon-minus::before {
  content: '\e627';
}
.li-octagon-pause::before {
  content: '\e21b';
}
.li-octagon-x::before {
  content: '\e128';
}
.li-octagon::before {
  content: '\e126';
}
.li-omega::before {
  content: '\e619';
}
.li-option::before {
  content: '\e1f8';
}
.li-orbit::before {
  content: '\e3e7';
}
.li-origami::before {
  content: '\e5e3';
}
.li-outdent::before {
  content: '\e107';
}
.li-package-2::before {
  content: '\e340';
}
.li-package-check::before {
  content: '\e266';
}
.li-package-minus::before {
  content: '\e267';
}
.li-package-open::before {
  content: '\e2cc';
}
.li-package-plus::before {
  content: '\e268';
}
.li-package-search::before {
  content: '\e269';
}
.li-package-x::before {
  content: '\e26a';
}
.li-package::before {
  content: '\e129';
}
.li-paint-bucket::before {
  content: '\e2e6';
}
.li-paint-roller::before {
  content: '\e59e';
}
.li-paintbrush-2::before {
  content: '\e2e8';
}
.li-paintbrush-vertical::before {
  content: '\e2e8';
}
.li-paintbrush::before {
  content: '\e2e7';
}
.li-palette::before {
  content: '\e1dd';
}
.li-palmtree::before {
  content: '\e281';
}
.li-panda::before {
  content: '\e668';
}
.li-panel-bottom-close::before {
  content: '\e42d';
}
.li-panel-bottom-dashed::before {
  content: '\e42e';
}
.li-panel-bottom-inactive::before {
  content: '\e42e';
}
.li-panel-bottom-open::before {
  content: '\e42f';
}
.li-panel-bottom::before {
  content: '\e42c';
}
.li-panel-left-close::before {
  content: '\e21c';
}
.li-panel-left-dashed::before {
  content: '\e430';
}
.li-panel-left-inactive::before {
  content: '\e430';
}
.li-panel-left-open::before {
  content: '\e21d';
}
.li-panel-left-right-dashed::before {
  content: '\e692';
}
.li-panel-left::before {
  content: '\e12a';
}
.li-panel-right-close::before {
  content: '\e432';
}
.li-panel-right-dashed::before {
  content: '\e433';
}
.li-panel-right-inactive::before {
  content: '\e433';
}
.li-panel-right-open::before {
  content: '\e434';
}
.li-panel-right::before {
  content: '\e431';
}
.li-panel-top-bottom-dashed::before {
  content: '\e693';
}
.li-panel-top-close::before {
  content: '\e436';
}
.li-panel-top-dashed::before {
  content: '\e437';
}
.li-panel-top-inactive::before {
  content: '\e437';
}
.li-panel-top-open::before {
  content: '\e438';
}
.li-panel-top::before {
  content: '\e435';
}
.li-panels-left-bottom::before {
  content: '\e12b';
}
.li-panels-left-right::before {
  content: '\e099';
}
.li-panels-right-bottom::before {
  content: '\e588';
}
.li-panels-top-bottom::before {
  content: '\e58a';
}
.li-panels-top-left::before {
  content: '\e12c';
}
.li-paperclip::before {
  content: '\e12d';
}
.li-parasol::before {
  content: '\e6fd';
}
.li-parentheses::before {
  content: '\e444';
}
.li-parking-circle-off::before {
  content: '\e3ca';
}
.li-parking-circle::before {
  content: '\e3c9';
}
.li-parking-meter::before {
  content: '\e500';
}
.li-parking-square-off::before {
  content: '\e3cc';
}
.li-parking-square::before {
  content: '\e3cb';
}
.li-party-popper::before {
  content: '\e343';
}
.li-pause-circle::before {
  content: '\e07f';
}
.li-pause-octagon::before {
  content: '\e21b';
}
.li-pause::before {
  content: '\e12e';
}
.li-paw-print::before {
  content: '\e4f5';
}
.li-pc-case::before {
  content: '\e446';
}
.li-pen-box::before {
  content: '\e172';
}
.li-pen-line::before {
  content: '\e130';
}
.li-pen-off::before {
  content: '\e5ee';
}
.li-pen-square::before {
  content: '\e172';
}
.li-pen-tool::before {
  content: '\e131';
}
.li-pen::before {
  content: '\e12f';
}
.li-pencil-line::before {
  content: '\e4f0';
}
.li-pencil-off::before {
  content: '\e5ef';
}
.li-pencil-ruler::before {
  content: '\e4f1';
}
.li-pencil-sparkles::before {
  content: '\e70f';
}
.li-pencil::before {
  content: '\e1f9';
}
.li-pentagon::before {
  content: '\e52b';
}
.li-percent-circle::before {
  content: '\e51a';
}
.li-percent-diamond::before {
  content: '\e51b';
}
.li-percent-square::before {
  content: '\e51c';
}
.li-percent::before {
  content: '\e132';
}
.li-person-standing::before {
  content: '\e21e';
}
.li-philippine-peso::before {
  content: '\e604';
}
.li-phone-call::before {
  content: '\e134';
}
.li-phone-forwarded::before {
  content: '\e135';
}
.li-phone-incoming::before {
  content: '\e136';
}
.li-phone-missed::before {
  content: '\e137';
}
.li-phone-off::before {
  content: '\e138';
}
.li-phone-outgoing::before {
  content: '\e139';
}
.li-phone::before {
  content: '\e133';
}
.li-pi-square::before {
  content: '\e488';
}
.li-pi::before {
  content: '\e472';
}
.li-piano::before {
  content: '\e561';
}
.li-pickaxe::before {
  content: '\e5c6';
}
.li-picture-in-picture-2::before {
  content: '\e3af';
}
.li-picture-in-picture::before {
  content: '\e3ae';
}
.li-pie-chart::before {
  content: '\e06b';
}
.li-piggy-bank::before {
  content: '\e13a';
}
.li-pilcrow-left::before {
  content: '\e5dc';
}
.li-pilcrow-right::before {
  content: '\e5dd';
}
.li-pilcrow-square::before {
  content: '\e48b';
}
.li-pilcrow::before {
  content: '\e3a3';
}
.li-pill-bottle::before {
  content: '\e5ea';
}
.li-pill::before {
  content: '\e3bd';
}
.li-pin-off::before {
  content: '\e2b6';
}
.li-pin::before {
  content: '\e259';
}
.li-pipette::before {
  content: '\e13b';
}
.li-pizza::before {
  content: '\e354';
}
.li-plane-landing::before {
  content: '\e3cd';
}
.li-plane-takeoff::before {
  content: '\e3ce';
}
.li-plane::before {
  content: '\e1de';
}
.li-play-circle::before {
  content: '\e080';
}
.li-play-off::before {
  content: '\e6fe';
}
.li-play-square::before {
  content: '\e481';
}
.li-play::before {
  content: '\e13c';
}
.li-plug-2::before {
  content: '\e380';
}
.li-plug-zap-2::before {
  content: '\e45c';
}
.li-plug-zap::before {
  content: '\e45c';
}
.li-plug::before {
  content: '\e37f';
}
.li-plus-circle::before {
  content: '\e081';
}
.li-plus-square::before {
  content: '\e173';
}
.li-plus::before {
  content: '\e13d';
}
.li-pocket-knife::before {
  content: '\e4a0';
}
.li-podcast::before {
  content: '\e1fa';
}
.li-podium::before {
  content: '\e704';
}
.li-pointer-off::before {
  content: '\e57f';
}
.li-pointer::before {
  content: '\e1e8';
}
.li-popcorn::before {
  content: '\e4be';
}
.li-popsicle::before {
  content: '\e4bf';
}
.li-pound-sterling::before {
  content: '\e13f';
}
.li-power-circle::before {
  content: '\e550';
}
.li-power-off::before {
  content: '\e209';
}
.li-power-square::before {
  content: '\e551';
}
.li-power::before {
  content: '\e140';
}
.li-presentation::before {
  content: '\e4ae';
}
.li-printer-check::before {
  content: '\e5f5';
}
.li-printer-x::before {
  content: '\e6c1';
}
.li-printer::before {
  content: '\e141';
}
.li-projector::before {
  content: '\e4af';
}
.li-proportions::before {
  content: '\e5cf';
}
.li-puzzle::before {
  content: '\e29c';
}
.li-pyramid::before {
  content: '\e52c';
}
.li-qr-code::before {
  content: '\e1df';
}
.li-quote::before {
  content: '\e239';
}
.li-rabbit::before {
  content: '\e4f6';
}
.li-radar::before {
  content: '\e497';
}
.li-radiation::before {
  content: '\e442';
}
.li-radical::before {
  content: '\e5c2';
}
.li-radio-off::before {
  content: '\e6dd';
}
.li-radio-receiver::before {
  content: '\e1fb';
}
.li-radio-tower::before {
  content: '\e404';
}
.li-radio::before {
  content: '\e142';
}
.li-radius::before {
  content: '\e52d';
}
.li-rainbow::before {
  content: '\e4c2';
}
.li-rat::before {
  content: '\e3eb';
}
.li-ratio::before {
  content: '\e4e8';
}
.li-receipt-cent::before {
  content: '\e5a5';
}
.li-receipt-euro::before {
  content: '\e5a6';
}
.li-receipt-indian-rupee::before {
  content: '\e5a7';
}
.li-receipt-japanese-yen::before {
  content: '\e5a8';
}
.li-receipt-pound-sterling::before {
  content: '\e5a9';
}
.li-receipt-russian-ruble::before {
  content: '\e5aa';
}
.li-receipt-swiss-franc::before {
  content: '\e5ab';
}
.li-receipt-text::before {
  content: '\e5ac';
}
.li-receipt-turkish-lira::before {
  content: '\e67f';
}
.li-receipt::before {
  content: '\e3d3';
}
.li-rectangle-circle::before {
  content: '\e673';
}
.li-rectangle-ellipsis::before {
  content: '\e21f';
}
.li-rectangle-goggles::before {
  content: '\e656';
}
.li-rectangle-horizontal::before {
  content: '\e376';
}
.li-rectangle-vertical::before {
  content: '\e377';
}
.li-recycle::before {
  content: '\e2e9';
}
.li-redo-2::before {
  content: '\e2a0';
}
.li-redo-dot::before {
  content: '\e450';
}
.li-redo::before {
  content: '\e143';
}
.li-refresh-ccw-dot::before {
  content: '\e4b2';
}
.li-refresh-ccw::before {
  content: '\e144';
}
.li-refresh-cw-off::before {
  content: '\e498';
}
.li-refresh-cw::before {
  content: '\e145';
}
.li-refrigerator::before {
  content: '\e37b';
}
.li-regex::before {
  content: '\e1fc';
}
.li-remove-formatting::before {
  content: '\e3b3';
}
.li-repeat-1::before {
  content: '\e1fd';
}
.li-repeat-2::before {
  content: '\e411';
}
.li-repeat-off::before {
  content: '\e6f3';
}
.li-repeat::before {
  content: '\e146';
}
.li-replace-all::before {
  content: '\e3dc';
}
.li-replace::before {
  content: '\e3db';
}
.li-reply-all::before {
  content: '\e22b';
}
.li-reply::before {
  content: '\e22a';
}
.li-rewind::before {
  content: '\e147';
}
.li-ribbon::before {
  content: '\e558';
}
.li-road::before {
  content: '\e6d9';
}
.li-rocket::before {
  content: '\e286';
}
.li-rocking-chair::before {
  content: '\e233';
}
.li-roller-coaster::before {
  content: '\e480';
}
.li-rose::before {
  content: '\e691';
}
.li-rotate-3-d::before {
  content: '\e2ea';
}
.li-rotate-3d::before {
  content: '\e2ea';
}
.li-rotate-ccw-key::before {
  content: '\e650';
}
.li-rotate-ccw-square::before {
  content: '\e5d0';
}
.li-rotate-ccw::before {
  content: '\e148';
}
.li-rotate-cw-square::before {
  content: '\e5d1';
}
.li-rotate-cw::before {
  content: '\e149';
}
.li-route-off::before {
  content: '\e53f';
}
.li-route::before {
  content: '\e53e';
}
.li-router::before {
  content: '\e3bf';
}
.li-rows-2::before {
  content: '\e439';
}
.li-rows-3::before {
  content: '\e58a';
}
.li-rows-4::before {
  content: '\e58b';
}
.li-rows::before {
  content: '\e439';
}
.li-rss::before {
  content: '\e14a';
}
.li-ruler-dimension-line::before {
  content: '\e662';
}
.li-ruler::before {
  content: '\e14b';
}
.li-russian-ruble::before {
  content: '\e14c';
}
.li-sailboat::before {
  content: '\e37e';
}
.li-salad::before {
  content: '\e3a8';
}
.li-sandwich::before {
  content: '\e3a9';
}
.li-satellite-dish::before {
  content: '\e448';
}
.li-satellite::before {
  content: '\e447';
}
.li-saudi-riyal::before {
  content: '\e64b';
}
.li-save-all::before {
  content: '\e40f';
}
.li-save-check::before {
  content: '\e710';
}
.li-save-off::before {
  content: '\e5f3';
}
.li-save-pen::before {
  content: '\e705';
}
.li-save-plus::before {
  content: '\e706';
}
.li-save::before {
  content: '\e14d';
}
.li-scale-3-d::before {
  content: '\e2eb';
}
.li-scale-3d::before {
  content: '\e2eb';
}
.li-scale::before {
  content: '\e212';
}
.li-scaling::before {
  content: '\e2ec';
}
.li-scan-barcode::before {
  content: '\e535';
}
.li-scan-eye::before {
  content: '\e536';
}
.li-scan-face::before {
  content: '\e371';
}
.li-scan-heart::before {
  content: '\e63a';
}
.li-scan-line::before {
  content: '\e258';
}
.li-scan-qr-code::before {
  content: '\e5f6';
}
.li-scan-search::before {
  content: '\e537';
}
.li-scan-text::before {
  content: '\e538';
}
.li-scan::before {
  content: '\e257';
}
.li-scatter-chart::before {
  content: '\e48a';
}
.li-school-2::before {
  content: '\e3e5';
}
.li-school::before {
  content: '\e3e3';
}
.li-scissors-line-dashed::before {
  content: '\e4e9';
}
.li-scissors-square-dashed-bottom::before {
  content: '\e4eb';
}
.li-scissors-square::before {
  content: '\e4ec';
}
.li-scissors::before {
  content: '\e14e';
}
.li-scooter::before {
  content: '\e6ac';
}
.li-screen-share-off::before {
  content: '\e150';
}
.li-screen-share::before {
  content: '\e14f';
}
.li-scroll-text::before {
  content: '\e45f';
}
.li-scroll::before {
  content: '\e2ed';
}
.li-search-alert::before {
  content: '\e6e7';
}
.li-search-check::before {
  content: '\e4aa';
}
.li-search-code::before {
  content: '\e4ab';
}
.li-search-slash::before {
  content: '\e4ac';
}
.li-search-x::before {
  content: '\e4ad';
}
.li-search::before {
  content: '\e151';
}
.li-section::before {
  content: '\e5e8';
}
.li-send-horizonal::before {
  content: '\e4f2';
}
.li-send-horizontal::before {
  content: '\e4f2';
}
.li-send-to-back::before {
  content: '\e4f3';
}
.li-send::before {
  content: '\e152';
}
.li-separator-horizontal::before {
  content: '\e1c8';
}
.li-separator-vertical::before {
  content: '\e1c9';
}
.li-server-cog::before {
  content: '\e341';
}
.li-server-crash::before {
  content: '\e1e9';
}
.li-server-off::before {
  content: '\e1ea';
}
.li-server::before {
  content: '\e153';
}
.li-settings-2::before {
  content: '\e245';
}
.li-settings::before {
  content: '\e154';
}
.li-shapes::before {
  content: '\e4b3';
}
.li-share-2::before {
  content: '\e156';
}
.li-share::before {
  content: '\e155';
}
.li-sheet::before {
  content: '\e157';
}
.li-shell::before {
  content: '\e4f7';
}
.li-shelving-unit::before {
  content: '\e6c2';
}
.li-shield-alert::before {
  content: '\e1fe';
}
.li-shield-ban::before {
  content: '\e159';
}
.li-shield-check::before {
  content: '\e1ff';
}
.li-shield-close::before {
  content: '\e200';
}
.li-shield-cog-corner::before {
  content: '\e6e8';
}
.li-shield-cog::before {
  content: '\e6e9';
}
.li-shield-ellipsis::before {
  content: '\e516';
}
.li-shield-half::before {
  content: '\e517';
}
.li-shield-minus::before {
  content: '\e518';
}
.li-shield-off::before {
  content: '\e15a';
}
.li-shield-plus::before {
  content: '\e519';
}
.li-shield-question-mark::before {
  content: '\e40e';
}
.li-shield-question::before {
  content: '\e40e';
}
.li-shield-user::before {
  content: '\e647';
}
.li-shield-x::before {
  content: '\e200';
}
.li-shield::before {
  content: '\e158';
}
.li-ship-wheel::before {
  content: '\e502';
}
.li-ship::before {
  content: '\e3ba';
}
.li-shirt::before {
  content: '\e1ca';
}
.li-shopping-bag::before {
  content: '\e15b';
}
.li-shopping-basket::before {
  content: '\e4ea';
}
.li-shopping-cart::before {
  content: '\e15c';
}
.li-shovel::before {
  content: '\e15d';
}
.li-shower-head::before {
  content: '\e37c';
}
.li-shredder::before {
  content: '\e65b';
}
.li-shrimp::before {
  content: '\e649';
}
.li-shrink::before {
  content: '\e220';
}
.li-shrub::before {
  content: '\e2ee';
}
.li-shuffle::before {
  content: '\e15e';
}
.li-sidebar-close::before {
  content: '\e21c';
}
.li-sidebar-open::before {
  content: '\e21d';
}
.li-sidebar::before {
  content: '\e12a';
}
.li-sigma-square::before {
  content: '\e489';
}
.li-sigma::before {
  content: '\e201';
}
.li-signal-high::before {
  content: '\e260';
}
.li-signal-low::before {
  content: '\e261';
}
.li-signal-medium::before {
  content: '\e262';
}
.li-signal-zero::before {
  content: '\e263';
}
.li-signal::before {
  content: '\e25f';
}
.li-signature::before {
  content: '\e5f2';
}
.li-signpost-big::before {
  content: '\e541';
}
.li-signpost::before {
  content: '\e540';
}
.li-siren::before {
  content: '\e2ef';
}
.li-skip-back::before {
  content: '\e15f';
}
.li-skip-forward::before {
  content: '\e160';
}
.li-skull::before {
  content: '\e221';
}
.li-slash-square::before {
  content: '\e174';
}
.li-slash::before {
  content: '\e51d';
}
.li-slice::before {
  content: '\e2f0';
}
.li-sliders-horizontal::before {
  content: '\e29a';
}
.li-sliders-vertical::before {
  content: '\e162';
}
.li-sliders::before {
  content: '\e162';
}
.li-smartphone-charging::before {
  content: '\e22e';
}
.li-smartphone-nfc::before {
  content: '\e3c4';
}
.li-smartphone::before {
  content: '\e163';
}
.li-smile-plus::before {
  content: '\e301';
}
.li-smile::before {
  content: '\e164';
}
.li-snail::before {
  content: '\e4f8';
}
.li-snowflake::before {
  content: '\e165';
}
.li-soap-dispenser-droplet::before {
  content: '\e669';
}
.li-sofa::before {
  content: '\e2c4';
}
.li-solar-panel::before {
  content: '\e69f';
}
.li-sort-asc::before {
  content: '\e04c';
}
.li-sort-desc::before {
  content: '\e047';
}
.li-soup::before {
  content: '\e3aa';
}
.li-space::before {
  content: '\e3dd';
}
.li-spade::before {
  content: '\e499';
}
.li-sparkle::before {
  content: '\e47e';
}
.li-sparkles::before {
  content: '\e412';
}
.li-speaker::before {
  content: '\e166';
}
.li-speech::before {
  content: '\e51e';
}
.li-spell-check-2::before {
  content: '\e49b';
}
.li-spell-check::before {
  content: '\e49a';
}
.li-spline-pointer::before {
  content: '\e64f';
}
.li-spline::before {
  content: '\e38b';
}
.li-split-square-horizontal::before {
  content: '\e3b6';
}
.li-split-square-vertical::before {
  content: '\e3b7';
}
.li-split::before {
  content: '\e440';
}
.li-spool::before {
  content: '\e677';
}
.li-sport-shoe::before {
  content: '\e6db';
}
.li-spotlight::before {
  content: '\e682';
}
.li-spray-can::before {
  content: '\e495';
}
.li-sprout::before {
  content: '\e1eb';
}
.li-square-activity::before {
  content: '\e4b4';
}
.li-square-arrow-down-left::before {
  content: '\e4b5';
}
.li-square-arrow-down-right::before {
  content: '\e4b6';
}
.li-square-arrow-down::before {
  content: '\e427';
}
.li-square-arrow-left::before {
  content: '\e428';
}
.li-square-arrow-out-down-left::before {
  content: '\e5a1';
}
.li-square-arrow-out-down-right::before {
  content: '\e5a2';
}
.li-square-arrow-out-up-left::before {
  content: '\e5a3';
}
.li-square-arrow-out-up-right::before {
  content: '\e5a4';
}
.li-square-arrow-right-enter::before {
  content: '\e6c3';
}
.li-square-arrow-right-exit::before {
  content: '\e6c4';
}
.li-square-arrow-right::before {
  content: '\e429';
}
.li-square-arrow-up-left::before {
  content: '\e4b7';
}
.li-square-arrow-up-right::before {
  content: '\e4b8';
}
.li-square-arrow-up::before {
  content: '\e42a';
}
.li-square-asterisk::before {
  content: '\e168';
}
.li-square-bottom-dashed-scissors::before {
  content: '\e4eb';
}
.li-square-centerline-dashed-horizontal::before {
  content: '\e6c5';
}
.li-square-centerline-dashed-vertical::before {
  content: '\e6c6';
}
.li-square-chart-gantt::before {
  content: '\e169';
}
.li-square-check-big::before {
  content: '\e16a';
}
.li-square-check::before {
  content: '\e559';
}
.li-square-chevron-down::before {
  content: '\e3cf';
}
.li-square-chevron-left::before {
  content: '\e3d0';
}
.li-square-chevron-right::before {
  content: '\e3d1';
}
.li-square-chevron-up::before {
  content: '\e3d2';
}
.li-square-code::before {
  content: '\e16b';
}
.li-square-dashed-bottom-code::before {
  content: '\e4c1';
}
.li-square-dashed-bottom::before {
  content: '\e4c0';
}
.li-square-dashed-kanban::before {
  content: '\e16c';
}
.li-square-dashed-mouse-pointer::before {
  content: '\e509';
}
.li-square-dashed-text::before {
  content: '\e6ea';
}
.li-square-dashed-top-solid::before {
  content: '\e66c';
}
.li-square-dashed::before {
  content: '\e1cb';
}
.li-square-divide::before {
  content: '\e16d';
}
.li-square-dot::before {
  content: '\e16e';
}
.li-square-equal::before {
  content: '\e16f';
}
.li-square-function::before {
  content: '\e22d';
}
.li-square-gantt-chart::before {
  content: '\e169';
}
.li-square-kanban::before {
  content: '\e170';
}
.li-square-library::before {
  content: '\e54f';
}
.li-square-m::before {
  content: '\e503';
}
.li-square-menu::before {
  content: '\e453';
}
.li-square-minus::before {
  content: '\e171';
}
.li-square-mouse-pointer::before {
  content: '\e202';
}
.li-square-parking-off::before {
  content: '\e3cc';
}
.li-square-parking::before {
  content: '\e3cb';
}
.li-square-pause::before {
  content: '\e684';
}
.li-square-pen::before {
  content: '\e172';
}
.li-square-percent::before {
  content: '\e51c';
}
.li-square-pi::before {
  content: '\e488';
}
.li-square-pilcrow::before {
  content: '\e48b';
}
.li-square-play::before {
  content: '\e481';
}
.li-square-plus::before {
  content: '\e173';
}
.li-square-power::before {
  content: '\e551';
}
.li-square-radical::before {
  content: '\e5c3';
}
.li-square-round-corner::before {
  content: '\e648';
}
.li-square-scissors::before {
  content: '\e4ec';
}
.li-square-sigma::before {
  content: '\e489';
}
.li-square-slash::before {
  content: '\e174';
}
.li-square-split-horizontal::before {
  content: '\e3b6';
}
.li-square-split-vertical::before {
  content: '\e3b7';
}
.li-square-square::before {
  content: '\e60e';
}
.li-square-stack::before {
  content: '\e4a2';
}
.li-square-star::before {
  content: '\e68e';
}
.li-square-stop::before {
  content: '\e685';
}
.li-square-terminal::before {
  content: '\e20a';
}
.li-square-user-round::before {
  content: '\e466';
}
.li-square-user::before {
  content: '\e465';
}
.li-square-x::before {
  content: '\e175';
}
.li-square::before {
  content: '\e167';
}
.li-squares-exclude::before {
  content: '\e657';
}
.li-squares-intersect::before {
  content: '\e658';
}
.li-squares-subtract::before {
  content: '\e659';
}
.li-squares-unite::before {
  content: '\e65a';
}
.li-squircle-dashed::before {
  content: '\e679';
}
.li-squircle::before {
  content: '\e57a';
}
.li-squirrel::before {
  content: '\e49f';
}
.li-stamp::before {
  content: '\e3bb';
}
.li-star-check::before {
  content: '\e707';
}
.li-star-half::before {
  content: '\e20b';
}
.li-star-minus::before {
  content: '\e708';
}
.li-star-off::before {
  content: '\e2b0';
}
.li-star-plus::before {
  content: '\e709';
}
.li-star-x::before {
  content: '\e70a';
}
.li-star::before {
  content: '\e176';
}
.li-stars::before {
  content: '\e412';
}
.li-step-back::before {
  content: '\e3e9';
}
.li-step-forward::before {
  content: '\e3ea';
}
.li-stethoscope::before {
  content: '\e2f1';
}
.li-sticker::before {
  content: '\e302';
}
.li-sticky-note-check::before {
  content: '\e6f6';
}
.li-sticky-note-minus::before {
  content: '\e6f7';
}
.li-sticky-note-off::before {
  content: '\e6f8';
}
.li-sticky-note-plus::before {
  content: '\e6f9';
}
.li-sticky-note-x::before {
  content: '\e6fa';
}
.li-sticky-note::before {
  content: '\e303';
}
.li-sticky-notes::before {
  content: '\e6fb';
}
.li-stone::before {
  content: '\e6eb';
}
.li-stop-circle::before {
  content: '\e083';
}
.li-store::before {
  content: '\e3e4';
}
.li-stretch-horizontal::before {
  content: '\e27c';
}
.li-stretch-vertical::before {
  content: '\e27d';
}
.li-strikethrough::before {
  content: '\e177';
}
.li-subscript::before {
  content: '\e25c';
}
.li-subtitles::before {
  content: '\e3a4';
}
.li-summary::before {
  content: '\e711';
}
.li-sun-dim::before {
  content: '\e299';
}
.li-sun-medium::before {
  content: '\e2b1';
}
.li-sun-moon::before {
  content: '\e2b2';
}
.li-sun-snow::before {
  content: '\e372';
}
.li-sun::before {
  content: '\e178';
}
.li-sunrise::before {
  content: '\e179';
}
.li-sunset::before {
  content: '\e17a';
}
.li-superscript::before {
  content: '\e25e';
}
.li-swatch-book::before {
  content: '\e59f';
}
.li-swiss-franc::before {
  content: '\e17b';
}
.li-switch-camera::before {
  content: '\e17c';
}
.li-sword::before {
  content: '\e2b3';
}
.li-swords::before {
  content: '\e2b4';
}
.li-syringe::before {
  content: '\e2f2';
}
.li-table-2::before {
  content: '\e2f9';
}
.li-table-cells-merge::before {
  content: '\e5c7';
}
.li-table-cells-split::before {
  content: '\e5c8';
}
.li-table-columns-split::before {
  content: '\e5c9';
}
.li-table-config::before {
  content: '\e661';
}
.li-table-of-contents::before {
  content: '\e61e';
}
.li-table-properties::before {
  content: '\e4db';
}
.li-table-rows-split::before {
  content: '\e5ca';
}
.li-table::before {
  content: '\e17d';
}
.li-tablet-smartphone::before {
  content: '\e50a';
}
.li-tablet::before {
  content: '\e17e';
}
.li-tablets::before {
  content: '\e3be';
}
.li-tag-plus::before {
  content: '\e712';
}
.li-tag-x::before {
  content: '\e713';
}
.li-tag::before {
  content: '\e17f';
}
.li-tags::before {
  content: '\e35c';
}
.li-tally-1::before {
  content: '\e4d6';
}
.li-tally-2::before {
  content: '\e4d7';
}
.li-tally-3::before {
  content: '\e4d8';
}
.li-tally-4::before {
  content: '\e4d9';
}
.li-tally-5::before {
  content: '\e4da';
}
.li-tangent::before {
  content: '\e52e';
}
.li-target::before {
  content: '\e180';
}
.li-telescope::before {
  content: '\e5c5';
}
.li-tent-tree::before {
  content: '\e53b';
}
.li-tent::before {
  content: '\e227';
}
.li-terminal-square::before {
  content: '\e20a';
}
.li-terminal::before {
  content: '\e181';
}
.li-test-tube-2::before {
  content: '\e406';
}
.li-test-tube-diagonal::before {
  content: '\e406';
}
.li-test-tube::before {
  content: '\e405';
}
.li-test-tubes::before {
  content: '\e407';
}
.li-text-align-center::before {
  content: '\e182';
}
.li-text-align-end::before {
  content: '\e183';
}
.li-text-align-justify::before {
  content: '\e184';
}
.li-text-align-start::before {
  content: '\e185';
}
.li-text-cursor-input::before {
  content: '\e265';
}
.li-text-cursor::before {
  content: '\e264';
}
.li-text-initial::before {
  content: '\e605';
}
.li-text-quote::before {
  content: '\e49e';
}
.li-text-search::before {
  content: '\e5ad';
}
.li-text-select::before {
  content: '\e6ea';
}
.li-text-selection::before {
  content: '\e3de';
}
.li-text-wrap::before {
  content: '\e248';
}
.li-text::before {
  content: '\e185';
}
.li-theater::before {
  content: '\e522';
}
.li-thermometer-snowflake::before {
  content: '\e187';
}
.li-thermometer-sun::before {
  content: '\e188';
}
.li-thermometer::before {
  content: '\e186';
}
.li-thumbs-down::before {
  content: '\e189';
}
.li-thumbs-up::before {
  content: '\e18a';
}
.li-ticket-check::before {
  content: '\e5ae';
}
.li-ticket-minus::before {
  content: '\e5af';
}
.li-ticket-percent::before {
  content: '\e5b0';
}
.li-ticket-plus::before {
  content: '\e5b1';
}
.li-ticket-slash::before {
  content: '\e5b2';
}
.li-ticket-x::before {
  content: '\e5b3';
}
.li-ticket::before {
  content: '\e20f';
}
.li-tickets-plane::before {
  content: '\e623';
}
.li-tickets::before {
  content: '\e622';
}
.li-timeline::before {
  content: '\e6ec';
}
.li-timer-off::before {
  content: '\e249';
}
.li-timer-reset::before {
  content: '\e236';
}
.li-timer::before {
  content: '\e1e0';
}
.li-toggle-left::before {
  content: '\e18b';
}
.li-toggle-right::before {
  content: '\e18c';
}
.li-toilet::before {
  content: '\e635';
}
.li-tool-case::before {
  content: '\e67d';
}
.li-toolbox::before {
  content: '\e6b0';
}
.li-tornado::before {
  content: '\e218';
}
.li-torus::before {
  content: '\e52f';
}
.li-touchpad-off::before {
  content: '\e44a';
}
.li-touchpad::before {
  content: '\e449';
}
.li-towel-rack::before {
  content: '\e6c7';
}
.li-tower-control::before {
  content: '\e3bc';
}
.li-toy-brick::before {
  content: '\e347';
}
.li-tractor::before {
  content: '\e504';
}
.li-traffic-cone::before {
  content: '\e505';
}
.li-train-front-tunnel::before {
  content: '\e507';
}
.li-train-front::before {
  content: '\e506';
}
.li-train-track::before {
  content: '\e508';
}
.li-train::before {
  content: '\e2a9';
}
.li-tram-front::before {
  content: '\e2a9';
}
.li-transgender::before {
  content: '\e644';
}
.li-trash-2::before {
  content: '\e18e';
}
.li-trash::before {
  content: '\e18d';
}
.li-tree-deciduous::before {
  content: '\e2f3';
}
.li-tree-palm::before {
  content: '\e281';
}
.li-tree-pine::before {
  content: '\e2f4';
}
.li-trees::before {
  content: '\e2f5';
}
.li-trending-down::before {
  content: '\e190';
}
.li-trending-up-down::before {
  content: '\e625';
}
.li-trending-up::before {
  content: '\e191';
}
.li-triangle-alert::before {
  content: '\e193';
}
.li-triangle-dashed::before {
  content: '\e63d';
}
.li-triangle-right::before {
  content: '\e4ed';
}
.li-triangle::before {
  content: '\e192';
}
.li-trophy::before {
  content: '\e373';
}
.li-truck-electric::before {
  content: '\e65f';
}
.li-truck::before {
  content: '\e194';
}
.li-turkish-lira::before {
  content: '\e680';
}
.li-turntable::before {
  content: '\e68c';
}
.li-turtle::before {
  content: '\e4f9';
}
.li-tv-2::before {
  content: '\e203';
}
.li-tv-minimal-play::before {
  content: '\e5ec';
}
.li-tv-minimal::before {
  content: '\e203';
}
.li-tv::before {
  content: '\e195';
}
.li-type-outline::before {
  content: '\e602';
}
.li-type::before {
  content: '\e198';
}
.li-umbrella-off::before {
  content: '\e543';
}
.li-umbrella::before {
  content: '\e199';
}
.li-underline::before {
  content: '\e19a';
}
.li-undo-2::before {
  content: '\e2a1';
}
.li-undo-dot::before {
  content: '\e451';
}
.li-undo::before {
  content: '\e19b';
}
.li-unfold-horizontal::before {
  content: '\e43d';
}
.li-unfold-vertical::before {
  content: '\e43e';
}
.li-ungroup::before {
  content: '\e467';
}
.li-university::before {
  content: '\e3e5';
}
.li-unlink-2::before {
  content: '\e19d';
}
.li-unlink::before {
  content: '\e19c';
}
.li-unlock-keyhole::before {
  content: '\e532';
}
.li-unlock::before {
  content: '\e10c';
}
.li-unplug::before {
  content: '\e45d';
}
.li-upload-cloud::before {
  content: '\e091';
}
.li-upload::before {
  content: '\e19e';
}
.li-usb::before {
  content: '\e356';
}
.li-user-2::before {
  content: '\e468';
}
.li-user-check-2::before {
  content: '\e469';
}
.li-user-check::before {
  content: '\e1a0';
}
.li-user-circle-2::before {
  content: '\e462';
}
.li-user-circle::before {
  content: '\e461';
}
.li-user-cog-2::before {
  content: '\e46a';
}
.li-user-cog::before {
  content: '\e342';
}
.li-user-key::before {
  content: '\e6c8';
}
.li-user-lock::before {
  content: '\e660';
}
.li-user-minus-2::before {
  content: '\e46b';
}
.li-user-minus::before {
  content: '\e1a1';
}
.li-user-pen::before {
  content: '\e5fc';
}
.li-user-plus-2::before {
  content: '\e46c';
}
.li-user-plus::before {
  content: '\e1a2';
}
.li-user-round-arrow-left::before {
  content: '\e714';
}
.li-user-round-check::before {
  content: '\e469';
}
.li-user-round-cog::before {
  content: '\e46a';
}
.li-user-round-key::before {
  content: '\e6c9';
}
.li-user-round-minus::before {
  content: '\e46b';
}
.li-user-round-pen::before {
  content: '\e5fd';
}
.li-user-round-plus::before {
  content: '\e46c';
}
.li-user-round-search::before {
  content: '\e578';
}
.li-user-round-x::before {
  content: '\e46d';
}
.li-user-round::before {
  content: '\e468';
}
.li-user-search::before {
  content: '\e579';
}
.li-user-square-2::before {
  content: '\e466';
}
.li-user-square::before {
  content: '\e465';
}
.li-user-star::before {
  content: '\e687';
}
.li-user-x-2::before {
  content: '\e46d';
}
.li-user-x::before {
  content: '\e1a3';
}
.li-user::before {
  content: '\e19f';
}
.li-users-2::before {
  content: '\e46e';
}
.li-users-round::before {
  content: '\e46e';
}
.li-users::before {
  content: '\e1a4';
}
.li-utensils-crossed::before {
  content: '\e2f7';
}
.li-utensils::before {
  content: '\e2f6';
}
.li-utility-pole::before {
  content: '\e3c2';
}
.li-van::before {
  content: '\e6ad';
}
.li-variable::before {
  content: '\e473';
}
.li-vault::before {
  content: '\e58f';
}
.li-vector-square::before {
  content: '\e67c';
}
.li-vegan::before {
  content: '\e39d';
}
.li-venetian-mask::before {
  content: '\e2aa';
}
.li-venus-and-mars::before {
  content: '\e646';
}
.li-venus::before {
  content: '\e645';
}
.li-verified::before {
  content: '\e241';
}
.li-vibrate-off::before {
  content: '\e29d';
}
.li-vibrate::before {
  content: '\e223';
}
.li-video-off::before {
  content: '\e1a6';
}
.li-video::before {
  content: '\e1a5';
}
.li-videotape::before {
  content: '\e4cb';
}
.li-view::before {
  content: '\e1a7';
}
.li-voicemail::before {
  content: '\e1a8';
}
.li-volleyball::before {
  content: '\e62f';
}
.li-volume-1::before {
  content: '\e1aa';
}
.li-volume-2::before {
  content: '\e1ab';
}
.li-volume-off::before {
  content: '\e626';
}
.li-volume-x::before {
  content: '\e1ac';
}
.li-volume::before {
  content: '\e1a9';
}
.li-vote::before {
  content: '\e3ad';
}
.li-wallet-2::before {
  content: '\e4cd';
}
.li-wallet-cards::before {
  content: '\e4cc';
}
.li-wallet-minimal::before {
  content: '\e4cd';
}
.li-wallet::before {
  content: '\e204';
}
.li-wallpaper::before {
  content: '\e44b';
}
.li-wand-2::before {
  content: '\e357';
}
.li-wand-sparkles::before {
  content: '\e357';
}
.li-wand::before {
  content: '\e246';
}
.li-warehouse::before {
  content: '\e3e6';
}
.li-washing-machine::before {
  content: '\e590';
}
.li-watch::before {
  content: '\e1ad';
}
.li-waves-arrow-down::before {
  content: '\e6a9';
}
.li-waves-arrow-up::before {
  content: '\e6aa';
}
.li-waves-horizontal::before {
  content: '\e283';
}
.li-waves-ladder::before {
  content: '\e63b';
}
.li-waves-vertical::before {
  content: '\e6f2';
}
.li-waves::before {
  content: '\e283';
}
.li-waypoints::before {
  content: '\e542';
}
.li-webcam-off::before {
  content: '\e6ff';
}
.li-webcam::before {
  content: '\e205';
}
.li-webhook-off::before {
  content: '\e5b7';
}
.li-webhook::before {
  content: '\e374';
}
.li-weight-tilde::before {
  content: '\e6ae';
}
.li-weight::before {
  content: '\e530';
}
.li-wheat-off::before {
  content: '\e39f';
}
.li-wheat::before {
  content: '\e39e';
}
.li-whole-word::before {
  content: '\e3df';
}
.li-wifi-cog::before {
  content: '\e674';
}
.li-wifi-high::before {
  content: '\e5f7';
}
.li-wifi-low::before {
  content: '\e5f8';
}
.li-wifi-off::before {
  content: '\e1af';
}
.li-wifi-pen::before {
  content: '\e663';
}
.li-wifi-sync::before {
  content: '\e681';
}
.li-wifi-zero::before {
  content: '\e5f9';
}
.li-wifi::before {
  content: '\e1ae';
}
.li-wind-arrow-down::before {
  content: '\e631';
}
.li-wind::before {
  content: '\e1b0';
}
.li-wine-off::before {
  content: '\e3a0';
}
.li-wine::before {
  content: '\e2f8';
}
.li-workflow::before {
  content: '\e425';
}
.li-worm::before {
  content: '\e5da';
}
.li-wrap-text::before {
  content: '\e248';
}
.li-wrench-off::before {
  content: '\e70b';
}
.li-wrench::before {
  content: '\e1b1';
}
.li-x-circle::before {
  content: '\e084';
}
.li-x-line-top::before {
  content: '\e6ca';
}
.li-x-octagon::before {
  content: '\e128';
}
.li-x-square::before {
  content: '\e175';
}
.li-x::before {
  content: '\e1b2';
}
.li-zap-off::before {
  content: '\e1b5';
}
.li-zap::before {
  content: '\e1b4';
}
.li-zodiac-aquarius::before {
  content: '\e6cb';
}
.li-zodiac-aries::before {
  content: '\e6cc';
}
.li-zodiac-cancer::before {
  content: '\e6cd';
}
.li-zodiac-capricorn::before {
  content: '\e6ce';
}
.li-zodiac-gemini::before {
  content: '\e6cf';
}
.li-zodiac-leo::before {
  content: '\e6d0';
}
.li-zodiac-libra::before {
  content: '\e6d1';
}
.li-zodiac-ophiuchus::before {
  content: '\e6d2';
}
.li-zodiac-pisces::before {
  content: '\e6d3';
}
.li-zodiac-sagittarius::before {
  content: '\e6d4';
}
.li-zodiac-scorpio::before {
  content: '\e6d5';
}
.li-zodiac-taurus::before {
  content: '\e6d6';
}
.li-zodiac-virgo::before {
  content: '\e6d7';
}
.li-zoom-in::before {
  content: '\e1b6';
}
.li-zoom-out::before {
  content: '\e1b7';
}
/* Tokens */
:root {
  /* Color HSLs
    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
  */

  /* Basic Colors */

  /**
  * @tokens Basic Colors
  * @presenter Color
  */
  --op-color-white: hsl(0deg 100% 100%);
  --op-color-black: hsl(0deg 0% 0%);

  /**
  * @tokens Primary Colors
  * @presenter Color
  */
  --op-color-primary-h: 216;
  --op-color-primary-s: 58%;
  --op-color-primary-l: 48%;

  /**
  * @tokens Neutral Colors
  * @presenter Color
  */
  --op-color-neutral-h: var(--op-color-primary-h);
  --op-color-neutral-s: 4%;
  --op-color-neutral-l: var(--op-color-primary-l);

  /**
  * @tokens Alerts Warning Colors
  * @presenter Color
  */
  --op-color-alerts-warning-h: 47;
  --op-color-alerts-warning-s: 100%;
  --op-color-alerts-warning-l: 61%;

  /**
  * @tokens Alerts Danger Colors
  * @presenter Color
  */
  --op-color-alerts-danger-h: 0;
  --op-color-alerts-danger-s: 99%;
  --op-color-alerts-danger-l: 76%;

  /**
  * @tokens Alerts Info Colors
  * @presenter Color
  */
  --op-color-alerts-info-h: 216;
  --op-color-alerts-info-s: 58%;
  --op-color-alerts-info-l: 48%;

  /**
  * @tokens Alerts Notice Colors
  * @presenter Color
  */
  --op-color-alerts-notice-h: 130;
  --op-color-alerts-notice-s: 61%;
  --op-color-alerts-notice-l: 64%;

  /**
  * @tokens Opacities
  * @presenter Opacity
  */
  --op-opacity-none: 0;
  --op-opacity-overlay: 0.2;
  --op-opacity-disabled: 0.4;
  --op-opacity-half: 0.5;
  --op-opacity-full: 1;

  /*
    Breakpoints
    CSS does not support using variables within @media or @container queries. Environment variables are drafted but likely to not be implemented soon.
    https://drafts.csswg.org/css-env-1/
    https://bholmes.dev/blog/alternative-to-css-variable-media-queries/

    Here is a list of breakpoints used throughout Optics:
  */

  /**
  * @tokens Breakpoints
  * @presenter Spacing
  */
  --op-breakpoint-x-small: 512px; /* vertical phone */
  --op-breakpoint-small: 768px; /* vertical ipad */
  --op-breakpoint-medium: 1024px; /* landscape ipad */
  --op-breakpoint-large: 1280px; /* small laptop */
  --op-breakpoint-x-large: 1440px; /* medium laptop */

  /* Border */

  /**
  * @tokens Border Radius
  * @presenter BorderRadius
  */
  --op-radius-small: 2px;
  --op-radius-medium: 4px;
  --op-radius-large: 8px;
  --op-radius-x-large: 12px;
  --op-radius-2x-large: 16px;
  --op-radius-circle: 50%;
  --op-radius-pill: 9999px;

  /**
  * @tokens Border Width
  * @presenter Spacing
  */
  --op-border-width: 1px;
  --op-border-width-large: 2px;
  --op-border-width-x-large: 4px;

  /**
  * @tokens Border Color
  * @presenter Color
  */
  --op-color-border: var(--op-color-neutral-plus-five);

  /* E.G. box-shadow: var(--op-border-top) var(--op-color-border); */

  /**
  * @tokens Border Shadow
  * @presenter Shadow
  */
  --op-border-none: 0 0 0 0;
  --op-border-all: 0 0 0 var(--op-border-width);
  --op-border-top: 0 calc(-1 * var(--op-border-width)) 0 0;
  --op-border-right: var(--op-border-width) 0 0 0;
  --op-border-bottom: 0 var(--op-border-width) 0 0;
  --op-border-left: calc(-1 * var(--op-border-width)) 0 0 0;
  --op-border-y: var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border);
  --op-border-x: var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border);

  /* Font */

  /**
  * @tokens Font Scale
  * @presenter FontSize
  */
  --op-font-scale-unit: 1rem; /* 10px; */
  --op-font-2x-small: calc(var(--op-font-scale-unit) * 1); /* 10px */
  --op-font-x-small: calc(var(--op-font-scale-unit) * 1.2); /* 12px */
  --op-font-small: calc(var(--op-font-scale-unit) * 1.4); /* 14px */
  --op-font-medium: calc(var(--op-font-scale-unit) * 1.6); /* 16px */
  --op-font-large: calc(var(--op-font-scale-unit) * 1.8); /* 18px */
  --op-font-x-large: calc(var(--op-font-scale-unit) * 2); /* 20px */
  --op-font-2x-large: calc(var(--op-font-scale-unit) * 2.4); /* 24px */
  --op-font-3x-large: calc(var(--op-font-scale-unit) * 2.8); /* 28px */
  --op-font-4x-large: calc(var(--op-font-scale-unit) * 3.2); /* 32px */
  --op-font-5x-large: calc(var(--op-font-scale-unit) * 3.6); /* 36px */
  --op-font-6x-large: calc(var(--op-font-scale-unit) * 4.8); /* 48px */

  /**
  * @tokens Font Weight
  * @presenter FontWeight
  */
  --op-font-weight-thin: 100;
  --op-font-weight-extra-light: 200;
  --op-font-weight-light: 300;
  --op-font-weight-normal: 400;
  --op-font-weight-medium: 500;
  --op-font-weight-semi-bold: 600;
  --op-font-weight-bold: 700;
  --op-font-weight-extra-bold: 800;
  --op-font-weight-black: 900;

  /**
  * @tokens Font Family
  * @presenter FontFamily
  */
  --op-font-family: 'Noto Sans', sans-serif;
  --op-font-family-alt: 'Noto Serif', serif;

  /* Text */

  /**
  * @tokens Line Height
  * @presenter LineHeight
  */
  --op-line-height-none: 0;
  --op-line-height-densest: 1;
  --op-line-height-denser: 1.15;
  --op-line-height-dense: 1.3;
  --op-line-height-base: 1.5;
  --op-line-height-loose: 1.6;
  --op-line-height-looser: 1.7;
  --op-line-height-loosest: 1.8;

  /**
  * @tokens Letter Spacing
  * @presenter LetterSpacing
  */
  --op-letter-spacing-navigation: 0.01rem;
  --op-letter-spacing-label: 0.04rem;

  /* Transitions and Animations */

  /**
  * @tokens Transition
  */
  --op-transition-accordion: rotate 120ms ease-in;
  --op-transition-accordion-content: height 300ms ease, content-visibility 300ms ease allow-discrete;
  --op-transition-input: all 120ms ease-in;
  --op-transition-sidebar: all 200ms ease-in-out;
  --op-transition-modal-time: 300ms;
  --op-transition-modal: all var(--op-transition-modal-time) ease-in;
  --op-transition-panel: right 400ms ease-in;
  --op-transition-tooltip: all 300ms ease-in 300ms;

  /**
  * @tokens Animation
  * @presenter Animation
  */
  --op-animation-flash: rm-slide-in-out-flash 5s normal forwards;

  /* Encoded Images */

  /**
  * @tokens Encoded Images
  */
  --op-encoded-images-dropdown-arrow-width: calc(
    1.2 * var(--op-space-scale-unit)
  ); /* 12px No way to string interpolate */

  --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==');

  /* Spacing */

  /**
  * @tokens Size Scale
  * @presenter Spacing
  */
  --op-size-unit: 0.4rem; /* 4px */

  /**
  * @tokens Space Scale
  * @presenter Spacing
  */
  --op-space-scale-unit: 1rem; /* 10px; */
  --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2); /* 2px */
  --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4); /* 4px */
  --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8); /* 8px */
  --op-space-small: calc(var(--op-space-scale-unit) * 1.2); /* 12px */
  --op-space-medium: calc(var(--op-space-scale-unit) * 1.6); /* 16px */
  --op-space-large: calc(var(--op-space-scale-unit) * 2); /* 20px */
  --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4); /* 24px */
  --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8); /* 28px */
  --op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
  --op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */

  /* Shadows */

  /**
  * @tokens Shadows
  * @presenter Shadow
  */
  --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
  --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);

  /* Z Index */

  /**
  * @tokens Z-Index
  */
  --op-z-index-header: 500;
  --op-z-index-footer: 500;
  --op-z-index-sidebar: 700;
  --op-z-index-dialog: 800;
  --op-z-index-dialog-backdrop: 801;
  --op-z-index-dialog-content: 802;
  --op-z-index-dropdown: 900;
  --op-z-index-alert-group: 950;
  --op-z-index-tooltip: 1000;

  /* Inputs */

  /*
    This should follow multiples of 4
    https: //uxdesign.cc/baseline-grids-design-systems-ae23b5af8cec See example 8
  */

  /**
  * @tokens Input Heights
  * @presenter Spacing
  */
  --op-input-height-small: 2.8rem; /* 28px */
  --op-input-height-medium: 3.6rem; /* 36px */
  --op-input-height-large: 4rem; /* 40px */
  --op-input-height-x-large: 8.4rem; /* 84px */

  /**
  * @tokens Input Focus
  * @presenter Shadow
  */
  --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
  --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
  --op-input-focus-primary:
    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
  --op-input-focus-neutral:
    var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
    var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
  --op-input-focus-danger:
    var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
  --op-input-focus-warning:
    var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
  --op-input-focus-info:
    var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
  --op-input-focus-notice:
    var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
}
/* Animations */
@keyframes rm-slide-in-out-flash {
  /*
    If an duration of 5s is set:
    Start off the Screen
  */
  0% {
    inset-inline-end: -100%;
  }

  /* Animate onto the screen for 0.5s */
  10% {
    inset-inline-end: var(--op-space-large);
  }

  /* Stay on the screen for 3s */
  70% {
    inset-inline-end: var(--op-space-large);
  }

  /* Animate off the screen for 1.5s */
  100% {
    inset-inline-end: -100%;
  }
}
:root {
  /* Enable light and dark mode switching */
  color-scheme: light dark;

  /*
    Semantic Scales: plus adds luminosity, minus removes luminosity
    This borrows from the photography concept of Aperture f-stops.
    https://www.adobe.com/creativecloud/photography/discover/f-stop.html
  */

  /**
  * @tokens Primary Colors
  * @presenter Color
  */
  --op-color-primary-original: hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));

  /* Main Scale */
  --op-color-primary-plus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%)
  );
  --op-color-primary-plus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%)
  );
  --op-color-primary-plus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%)
  );
  --op-color-primary-plus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
  );
  --op-color-primary-plus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%)
  );
  --op-color-primary-plus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
  );
  --op-color-primary-plus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%)
  );
  --op-color-primary-plus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%)
  );
  --op-color-primary-plus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%)
  );
  --op-color-primary-base: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );
  --op-color-primary-minus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%)
  );
  --op-color-primary-minus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%)
  );
  --op-color-primary-minus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%)
  );
  --op-color-primary-minus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%)
  );
  --op-color-primary-minus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
  );
  --op-color-primary-minus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-minus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-minus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
  );
  --op-color-primary-minus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );

  /* On Scale */
  --op-color-primary-on-plus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );
  --op-color-primary-on-plus-max-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
  );
  --op-color-primary-on-plus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
  );
  --op-color-primary-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%)
  );
  --op-color-primary-on-plus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
  );
  --op-color-primary-on-plus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-on-plus-six-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
  );
  --op-color-primary-on-plus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-on-plus-five-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%)
  );
  --op-color-primary-on-plus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-four-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-plus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
  );
  --op-color-primary-on-plus-three-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-plus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-two-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-plus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-one-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-base: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );
  --op-color-primary-on-base-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%)
  );
  --op-color-primary-on-minus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-one-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%)
  );
  --op-color-primary-on-minus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-two-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-minus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-three-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
  );
  --op-color-primary-on-minus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-four-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-five-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
  );
  --op-color-primary-on-minus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
  );
  --op-color-primary-on-minus-six-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
  );
  --op-color-primary-on-minus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
  );
  --op-color-primary-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%)
  );
  --op-color-primary-on-minus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%)
  );
  --op-color-primary-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );
  --op-color-primary-on-minus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%)
  );
  --op-color-primary-on-minus-max-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );

  /**
  * @tokens Neutral Colors
  * @presenter Color
  */
  --op-color-neutral-original: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));

  /* Main Scale */
  --op-color-neutral-plus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
  );
  --op-color-neutral-plus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%)
  );
  --op-color-neutral-plus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%)
  );
  --op-color-neutral-plus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%)
  );
  --op-color-neutral-plus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%)
  );
  --op-color-neutral-plus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
  );
  --op-color-neutral-plus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%)
  );
  --op-color-neutral-plus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
  );
  --op-color-neutral-plus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%)
  );
  --op-color-neutral-base: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
  );
  --op-color-neutral-minus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
  );
  --op-color-neutral-minus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%)
  );
  --op-color-neutral-minus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%)
  );
  --op-color-neutral-minus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%)
  );
  --op-color-neutral-minus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%)
  );
  --op-color-neutral-minus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-minus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-minus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-minus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );

  /* On Scale */
  --op-color-neutral-on-plus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-plus-max-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
  );
  --op-color-neutral-on-plus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
  );
  --op-color-neutral-on-plus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%)
  );
  --op-color-neutral-on-plus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-on-plus-six-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-plus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-on-plus-five-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%)
  );
  --op-color-neutral-on-plus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-four-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
  );
  --op-color-neutral-on-plus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-three-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
  );
  --op-color-neutral-on-plus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-two-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-on-plus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-plus-one-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%)
  );
  --op-color-neutral-on-base: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-base-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%)
  );
  --op-color-neutral-on-minus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-minus-one-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
  );
  --op-color-neutral-on-minus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-minus-two-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
  );
  --op-color-neutral-on-minus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%)
  );
  --op-color-neutral-on-minus-three-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%)
  );
  --op-color-neutral-on-minus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%)
  );
  --op-color-neutral-on-minus-four-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
  );
  --op-color-neutral-on-minus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
  );
  --op-color-neutral-on-minus-five-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
  );
  --op-color-neutral-on-minus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-six-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
  );
  --op-color-neutral-on-minus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
  );
  --op-color-neutral-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
  );
  --op-color-neutral-on-minus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
  );
  --op-color-neutral-on-minus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-max-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%)
  );

  /**
  * @tokens Alerts Warning Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));

  /* Main Scale */
  --op-color-alerts-warning-plus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
  );
  --op-color-alerts-warning-plus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
  );
  --op-color-alerts-warning-plus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-plus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
  );
  --op-color-alerts-warning-plus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
  );
  --op-color-alerts-warning-plus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%)
  );
  --op-color-alerts-warning-plus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-plus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );
  --op-color-alerts-warning-plus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%)
  );
  --op-color-alerts-warning-base: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%)
  );
  --op-color-alerts-warning-minus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%)
  );
  --op-color-alerts-warning-minus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%)
  );
  --op-color-alerts-warning-minus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%)
  );
  --op-color-alerts-warning-minus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%)
  );
  --op-color-alerts-warning-minus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%)
  );
  --op-color-alerts-warning-minus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-minus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-minus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-minus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)
  );

  /* On Scale */
  --op-color-alerts-warning-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%)
  );
  --op-color-alerts-warning-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
  );
  --op-color-alerts-warning-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
  );
  --op-color-alerts-warning-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
  );
  --op-color-alerts-warning-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
  );
  --op-color-alerts-warning-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)
  );
  --op-color-alerts-warning-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
  );
  --op-color-alerts-warning-on-base: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%)
  );
  --op-color-alerts-warning-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
  );
  --op-color-alerts-warning-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
  );
  --op-color-alerts-warning-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%)
  );
  --op-color-alerts-warning-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
  );
  --op-color-alerts-warning-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%)
  );
  --op-color-alerts-warning-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );
  --op-color-alerts-warning-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
  );
  --op-color-alerts-warning-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%)
  );
  --op-color-alerts-warning-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
  );
  --op-color-alerts-warning-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );

  /**
  * @tokens Alerts Danger Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));

  /* Main Scale */
  --op-color-alerts-danger-plus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
  );
  --op-color-alerts-danger-plus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-plus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-plus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%)
  );
  --op-color-alerts-danger-plus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%)
  );
  --op-color-alerts-danger-plus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%)
  );
  --op-color-alerts-danger-plus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%)
  );
  --op-color-alerts-danger-plus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );
  --op-color-alerts-danger-plus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
  );
  --op-color-alerts-danger-base: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%)
  );
  --op-color-alerts-danger-minus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%)
  );
  --op-color-alerts-danger-minus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%)
  );
  --op-color-alerts-danger-minus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%)
  );
  --op-color-alerts-danger-minus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%)
  );
  --op-color-alerts-danger-minus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%)
  );
  --op-color-alerts-danger-minus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
  );
  --op-color-alerts-danger-minus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
  );
  --op-color-alerts-danger-minus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-minus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
  );

  /* On Scale */
  --op-color-alerts-danger-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
  );
  --op-color-alerts-danger-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
  );
  --op-color-alerts-danger-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
  );
  --op-color-alerts-danger-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
  );
  --op-color-alerts-danger-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
  );
  --op-color-alerts-danger-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%)
  );
  --op-color-alerts-danger-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
  );
  --op-color-alerts-danger-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
  );
  --op-color-alerts-danger-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
  );
  --op-color-alerts-danger-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
  );
  --op-color-alerts-danger-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
  );
  --op-color-alerts-danger-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
  );
  --op-color-alerts-danger-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
  );
  --op-color-alerts-danger-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%)
  );
  --op-color-alerts-danger-on-base: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
  );
  --op-color-alerts-danger-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%)
  );
  --op-color-alerts-danger-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
  );
  --op-color-alerts-danger-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
  );
  --op-color-alerts-danger-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%)
  );
  --op-color-alerts-danger-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%)
  );
  --op-color-alerts-danger-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
  );
  --op-color-alerts-danger-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
  );
  --op-color-alerts-danger-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
  );
  --op-color-alerts-danger-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
  );
  --op-color-alerts-danger-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%)
  );
  --op-color-alerts-danger-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
  );
  --op-color-alerts-danger-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );
  --op-color-alerts-danger-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
  );
  --op-color-alerts-danger-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );

  /**
  * @tokens Alerts Info Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));

  /* Main Scale */
  --op-color-alerts-info-plus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
  );
  --op-color-alerts-info-plus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-plus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
  );
  --op-color-alerts-info-plus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%)
  );
  --op-color-alerts-info-plus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%)
  );
  --op-color-alerts-info-plus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%)
  );
  --op-color-alerts-info-plus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
  );
  --op-color-alerts-info-plus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%)
  );
  --op-color-alerts-info-plus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
  );
  --op-color-alerts-info-base: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
  );
  --op-color-alerts-info-minus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%)
  );
  --op-color-alerts-info-minus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%)
  );
  --op-color-alerts-info-minus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%)
  );
  --op-color-alerts-info-minus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%)
  );
  --op-color-alerts-info-minus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%)
  );
  --op-color-alerts-info-minus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
  );
  --op-color-alerts-info-minus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-minus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-minus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
  );

  /* On Scale */
  --op-color-alerts-info-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
  );
  --op-color-alerts-info-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
  );
  --op-color-alerts-info-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%)
  );
  --op-color-alerts-info-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
  );
  --op-color-alerts-info-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
  );
  --op-color-alerts-info-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%)
  );
  --op-color-alerts-info-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
  );
  --op-color-alerts-info-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%)
  );
  --op-color-alerts-info-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
  );
  --op-color-alerts-info-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%)
  );
  --op-color-alerts-info-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
  );
  --op-color-alerts-info-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-base: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
  );
  --op-color-alerts-info-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
  );
  --op-color-alerts-info-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
  );
  --op-color-alerts-info-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
  );
  --op-color-alerts-info-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%)
  );
  --op-color-alerts-info-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
  );
  --op-color-alerts-info-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
  );
  --op-color-alerts-info-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
  );
  --op-color-alerts-info-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
  );
  --op-color-alerts-info-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
  );
  --op-color-alerts-info-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
  );
  --op-color-alerts-info-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
  );
  --op-color-alerts-info-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
  );
  --op-color-alerts-info-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%)
  );
  --op-color-alerts-info-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
  );
  --op-color-alerts-info-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
  );

  /**
  * @tokens Alerts Notice Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));

  /* Main Scale */
  --op-color-alerts-notice-plus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
  );
  --op-color-alerts-notice-plus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%)
  );
  --op-color-alerts-notice-plus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%)
  );
  --op-color-alerts-notice-plus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%)
  );
  --op-color-alerts-notice-plus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%)
  );
  --op-color-alerts-notice-plus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
  );
  --op-color-alerts-notice-plus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
  );
  --op-color-alerts-notice-plus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
  );
  --op-color-alerts-notice-plus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
  );
  --op-color-alerts-notice-base: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%)
  );
  --op-color-alerts-notice-minus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%)
  );
  --op-color-alerts-notice-minus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%)
  );
  --op-color-alerts-notice-minus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%)
  );
  --op-color-alerts-notice-minus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%)
  );
  --op-color-alerts-notice-minus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%)
  );
  --op-color-alerts-notice-minus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
  );
  --op-color-alerts-notice-minus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
  );
  --op-color-alerts-notice-minus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
  );
  --op-color-alerts-notice-minus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
  );

  /* On Scale */
  --op-color-alerts-notice-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
  );
  --op-color-alerts-notice-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
  );
  --op-color-alerts-notice-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
  );
  --op-color-alerts-notice-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%)
  );
  --op-color-alerts-notice-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%)
  );
  --op-color-alerts-notice-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
  );
  --op-color-alerts-notice-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
  );
  --op-color-alerts-notice-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
  );
  --op-color-alerts-notice-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
  );
  --op-color-alerts-notice-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
  );
  --op-color-alerts-notice-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
  );
  --op-color-alerts-notice-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
  );
  --op-color-alerts-notice-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
  );
  --op-color-alerts-notice-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%)
  );
  --op-color-alerts-notice-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
  );
  --op-color-alerts-notice-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
  );
  --op-color-alerts-notice-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
  );
  --op-color-alerts-notice-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%)
  );
  --op-color-alerts-notice-on-base: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%)
  );
  --op-color-alerts-notice-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%)
  );
  --op-color-alerts-notice-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%)
  );
  --op-color-alerts-notice-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%)
  );
  --op-color-alerts-notice-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%)
  );
  --op-color-alerts-notice-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
  );
  --op-color-alerts-notice-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%)
  );
  --op-color-alerts-notice-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
  );
  --op-color-alerts-notice-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
  );
  --op-color-alerts-notice-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%)
  );
  --op-color-alerts-notice-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
  );
  --op-color-alerts-notice-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
  );
  --op-color-alerts-notice-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
  );

  /**
  * @tokens Dark Shadows
  * @presenter Shadow
  */
  --op-color-background: var(--op-color-neutral-plus-eight);
  --op-color-on-background: var(--op-color-neutral-on-plus-eight);
  --op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
}
/* Force Light Mode */
:root[data-theme-mode='light'] {
  color-scheme: only light;
}
/* Force Dark Mode */
:root[data-theme-mode='dark'] {
  color-scheme: only dark;

  /**
  * @tokens Dark Shadows
  * @presenter Shadow
  */
  --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
  --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);

  /**
  * @tokens Encoded Images
  */
  --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode='light']) {
    /**
    * @tokens Dark Shadows
    * @presenter Shadow
    */
    --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
    --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
    --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
    --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
    --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);

    /**
    * @tokens Encoded Images
    */
    --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
  }
}
/* Base styles and utilities */
/* After a reset, introduce base element styles specific to this system */
html {
  overflow: hidden; /* Needed to prevent flash messages and panels from causing overflow */
  font-family: var(--op-font-family);
  font-size: 62.5%; /* 1rem = 10px */
}
body {
  overflow: auto;
  background: var(--op-color-background);
  block-size: 100vh;
  color: var(--op-color-on-background);
  font-size: var(--op-font-medium);
}
button {
  background: none;
  cursor: pointer;
}
button,
input[type='submit'] {
  border: 0;
}
label {
  display: inline-block;

  &:hover {
    cursor: pointer;
  }
}
a {
  color: var(--op-color-primary-original);
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
pre {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--op-font-weight-normal);
  margin-block: 0 var(--op-space-small);
}
h1 {
  font-size: var(--op-font-3x-large);
}
h2 {
  font-size: var(--op-font-2x-large);
}
h3 {
  font-size: var(--op-font-large);
}
h4 {
  font-size: var(--op-font-medium);
}
h5 {
  font-size: var(--op-font-small);
}
h6 {
  font-size: var(--op-font-x-small);
}
p {
  font-size: var(--op-font-medium);
  margin-block-end: var(--op-space-small);
}
small {
  font-size: var(--op-font-small);
}
.app-with-sidebar {
  display: grid;
  block-size: 100vh;
  grid-template-columns: auto 1fr auto;
  inline-size: 100%;
}
.app-body {
  display: flex;
  overflow: auto;
  flex-direction: column;
}
.app__header {
  position: sticky;
  z-index: var(--op-z-index-header);
  flex-grow: 0;
  flex-shrink: 0;
  inset-block-start: 0;
}
.app__content {
  flex-grow: 1;
  padding: 0 var(--op-space-large);
  margin: 0 auto;
  inline-size: 100%;
  max-inline-size: var(--op-breakpoint-medium);
}
.app__content-no-margin {
  flex-grow: 1;
  padding: 0 var(--op-space-large);
  inline-size: 100%;
  overflow-y: auto;
}
.app__footer {
  position: sticky;
  z-index: var(--op-z-index-footer);
  flex-grow: 0;
  flex-shrink: 0;
  inset-block-end: 0;
}
/*
  <html lang='en'>
    <head>...</head>
    <body class="op-page">
      <div class="op-page__sidebar">...</div>
      <div class="op-page__main">
        <div class="op-page__main-header">...</div>
        <div class="op-page__main-content">...</div>
        <div class="op-page__main-footer">...</div>
      </div>
      <div class="op-page__sidebar op-page__sidebar--right">...</div>
    </body>
  </html>
*/
:root:has(.op-page) {
  /* Reset existing Optics layout */
  overflow: unset;

  body {
    overflow: unset;
  }

  /* New Layout */
  html,
  body {
    padding: 0;
    margin: 0;
    block-size: 100%;
    min-block-size: 100%;
  }
}
.op-page {
  display: grid;
  grid-template-areas: 'sidebar-left main sidebar-right';
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  min-block-size: 100dvh;

  .op-page__sidebar {
    grid-area: sidebar-left;

    &.op-page__sidebar--right {
      grid-area: sidebar-right;
    }
  }

  .op-page__main {
    grid-area: main;
  }

  .op-page__sidebar {
    position: sticky;
    z-index: var(--op-z-index-sidebar);
    block-size: 100dvh;
    inset-block-start: 0;
    max-block-size: 100dvh;

    > * {
      block-size: 100%;
    }
  }

  .op-page__main {
    display: grid;
    grid-template-areas:
      'main-header'
      'main-content'
      'main-footer';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    min-block-size: 100%;

    .op-page__main-header {
      grid-area: main-header;
    }

    .op-page__main-content {
      grid-area: main-content;
    }

    .op-page__main-footer {
      grid-area: main-footer;
    }

    .op-page__main-header {
      position: sticky;
      z-index: var(--op-z-index-header);
      inset-block-start: 0;
    }

    .op-page__main-content {
      inline-size: 100%;
      margin-inline: auto;
      max-inline-size: var(--op-breakpoint-medium);
      padding-block: var(--op-space-medium);
      padding-inline: var(--op-space-large);
    }

    .op-page__main-footer {
      position: sticky;
      z-index: var(--op-z-index-footer);
      inset-block-end: 0;
    }
  }
}
/* Container Properties */
.container {
  inline-size: 100%;
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: var(--op-breakpoint-medium);
  padding-block: 0;
  padding-inline: var(--op-space-large);
}
.container--sm {
  max-inline-size: var(--op-breakpoint-small);
}
.container--md-padding {
  padding: 0 var(--op-space-medium);
}
.container--sm-padding {
  padding: 0 var(--op-space-small);
}
.container--xs {
  max-inline-size: var(--op-breakpoint-x-small);
}
/* Width Properties */
.full-width {
  inline-size: 100%;
}
.half-width {
  inline-size: 50%;
}
.four-fifths-width {
  inline-size: calc(100% * 4 / 5);
}
.three-fifths-width {
  inline-size: calc(100% * 3 / 5);
}
.two-fifths-width {
  inline-size: calc(100% * 2 / 5);
}
.one-fifth-width {
  inline-size: calc(100% * 1 / 5);
}
.three-quarters-width {
  inline-size: calc(100% * 3 / 4);
}
.one-quarter-width {
  inline-size: calc(100% * 1 / 4);
}
.two-thirds-width {
  inline-size: calc(100% * 2 / 3);
}
.one-third-width {
  inline-size: calc(100% * 1 / 3);
}
/* Flex Properties */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-no-wrap {
  flex-wrap: nowrap;
}
.flex-grow-1 {
  flex-grow: 1;
}
/* Gap Properties */
.gap-none {
  gap: 0;

  --op-gap: 0;
}
.gap-xxs {
  gap: var(--op-space-2x-small);

  --op-gap: var(--op-space-2x-small);
}
.gap-xs {
  gap: var(--op-space-x-small);

  --op-gap: var(--op-space-x-small);
}
.gap-sm {
  gap: var(--op-space-small);

  --op-gap: var(--op-space-small);
}
.gap-md {
  gap: var(--op-space-medium);

  --op-gap: var(--op-space-medium);
}
.gap-lg {
  gap: var(--op-space-large);

  --op-gap: var(--op-space-large);
}
.gap-xl {
  gap: var(--op-space-x-large);

  --op-gap: var(--op-space-x-large);
}
/* Justify Content */
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
/* Align Items */
.items-stretch {
  align-items: stretch;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
/* Align Self */
.self-auto {
  align-self: auto;
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-end {
  align-self: flex-end;
}
.self-stretch {
  align-self: stretch;
}
.self-baseline {
  align-self: baseline;
}
/* Text Alignment */
.text-left {
  text-align: start;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: end;
}
.text-justify {
  text-align: justify;
}
/* Box Margin */
.margin-xl {
  margin: var(--op-space-x-large);
}
.margin-lg {
  margin: var(--op-space-large);
}
.margin-md {
  margin: var(--op-space-medium);
}
.margin-sm {
  margin: var(--op-space-small);
}
.margin-xs {
  margin: var(--op-space-x-small);
}
.margin-none {
  margin: 0;
}
.margin-auto {
  margin: auto;
}
/* Vertical Margin */
.margin-y-xl {
  margin-block: var(--op-space-x-large);
}
.margin-y-lg {
  margin-block: var(--op-space-large);
}
.margin-y-md {
  margin-block: var(--op-space-medium);
}
.margin-y-sm {
  margin-block: var(--op-space-small);
}
.margin-y-xs {
  margin-block: var(--op-space-x-small);
}
.margin-y-none {
  margin-block: 0;
}
/* Horizontal Margin */
.margin-x-xl {
  margin-inline: var(--op-space-x-large);
}
.margin-x-lg {
  margin-inline: var(--op-space-large);
}
.margin-x-md {
  margin-inline: var(--op-space-medium);
}
.margin-x-sm {
  margin-inline: var(--op-space-small);
}
.margin-x-xs {
  margin-inline: var(--op-space-x-small);
}
.margin-x-none {
  margin-inline: 0;
}
/* Top Margin */
.margin-top-xl {
  margin-block-start: var(--op-space-x-large);
}
.margin-top-lg {
  margin-block-start: var(--op-space-large);
}
.margin-top-md {
  margin-block-start: var(--op-space-medium);
}
.margin-top-sm {
  margin-block-start: var(--op-space-small);
}
.margin-top-xs {
  margin-block-start: var(--op-space-x-small);
}
.margin-top-none {
  margin-block-start: 0;
}
/* Bottom Margin */
.margin-bottom-xl {
  margin-block-end: var(--op-space-x-large);
}
.margin-bottom-lg {
  margin-block-end: var(--op-space-large);
}
.margin-bottom-md {
  margin-block-end: var(--op-space-medium);
}
.margin-bottom-sm {
  margin-block-end: var(--op-space-small);
}
.margin-bottom-xs {
  margin-block-end: var(--op-space-x-small);
}
.margin-bottom-none {
  margin-block-end: 0;
}
/* Right Margin */
.margin-right-xl {
  margin-inline-end: var(--op-space-x-large);
}
.margin-right-lg {
  margin-inline-end: var(--op-space-large);
}
.margin-right-md {
  margin-inline-end: var(--op-space-medium);
}
.margin-right-sm {
  margin-inline-end: var(--op-space-small);
}
.margin-right-xs {
  margin-inline-end: var(--op-space-x-small);
}
.margin-right-none {
  margin-inline-start: 0;
}
/* Left Margin */
.margin-left-xl {
  margin-inline-start: var(--op-space-x-large);
}
.margin-left-lg {
  margin-inline-start: var(--op-space-large);
}
.margin-left-md {
  margin-inline-start: var(--op-space-medium);
}
.margin-left-sm {
  margin-inline-start: var(--op-space-small);
}
.margin-left-xs {
  margin-inline-start: var(--op-space-x-small);
}
.margin-left-none {
  margin-inline-start: 0;
}
/*
  Accessibility
  Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
  https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.sr-only {
  position: absolute !important;
  overflow: hidden;
  block-size: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  inline-size: 1px;
}
/* Advanced Layout Utilities */
/* Equivalent to .flex.flex-col.gap-md */
.op-stack {
  display: flex;
  flex-direction: column;
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    gap: var(--op-space-medium);
  }
}
/* Equivalent to .flex.flex-wrap.items-center.gap-md */
.op-cluster {
  display: flex;
  flex-wrap: wrap;
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    align-items: center;
    gap: var(--op-space-medium);
  }
}
/* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
.op-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    align-items: center;
    gap: var(--op-space-medium);
  }
}
/*
  side by side layout with a small area and a large area
  similar to .flex with a .flex-grow-1 within it, but with a more semantic name and wrap handling.

  |[] [         ]|
  |[         ] []| with end
*/
.op-flank {
  display: flex;
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--op-space-medium);
  }

  /* Small area */
  &:not(.op-flank--end) > :first-child,
  &.op-flank--end > :last-child {
    flex-basis: auto;
    flex-grow: 1;
  }

  /* Large area */
  &:not(.op-flank--end) > :last-child,
  &.op-flank--end > :first-child {
    flex-basis: 0;
    flex-grow: 999;
  }
}
/* Grid Layout */
.op-grid {
  --_op-grid-min-column-size: var(--op-space-4x-large);
  --_op-grid-max-column-size: 0px;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(max(var(--_op-grid-min-column-size), var(--_op-grid-max-column-size)), 1fr)
  );
  margin-block: 0;
  margin-inline: 0;

  /* zero specificity. Lets utilities override */
  :where(&) {
    gap: var(--op-space-medium);
  }

  &.op-grid--2-column {
    --_op-grid-max-column-size: calc(100% / 3);
  }

  &.op-grid--3-column {
    --_op-grid-max-column-size: calc(100% / 4);
  }

  &.op-grid--4-column {
    --_op-grid-max-column-size: calc(100% / 5);
  }

  &.op-grid--5-column {
    --_op-grid-max-column-size: calc(100% / 6);
  }

  &.op-grid--6-column {
    --_op-grid-max-column-size: calc(100% / 7);
  }
}
/* Frame */
@property --_op-frame-inline-size {
  inherits: true;
  initial-value: 100%;
  syntax: '<length> | <percentage>';
}
.op-frame {
  display: flex;
  overflow: hidden;
  border-radius: inherit;
  aspect-ratio: 1 / 1;
  margin-block: 0;
  margin-inline: 0;
  max-inline-size: var(--_op-frame-inline-size);

  :where(&) {
    align-items: center;
    justify-content: center;
  }

  > img,
  > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  /* aspect ratio */

  &.op-frame--square {
    aspect-ratio: 1 / 1;
  }

  &.op-frame--landscape {
    aspect-ratio: 16 / 9;
  }

  &.op-frame--portrait {
    aspect-ratio: 9 / 16;
  }

  &.op-frame--4-3 {
    aspect-ratio: 4 / 3;
  }

  &.op-frame--3-4 {
    aspect-ratio: 3 / 4;
  }

  &.op-frame--3-2 {
    aspect-ratio: 3 / 2;
  }

  &.op-frame--2-3 {
    aspect-ratio: 2 / 3;
  }
}
/* Components */
.accordion {
  /* Public API (customizable component options) */
  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */

  overflow: hidden;
  interpolate-size: allow-keywords;

  /* Elements */

  summary {
    display: grid;
    align-items: center;
    cursor: pointer;
    gap: var(--op-space-2x-small);
    grid-template-columns: auto 1fr auto;
    min-block-size: var(--_op-accordion-summary-min-height);

    &::marker,
    &::-webkit-details-marker {
      display: none;
      content: '';
    }

    .accordion__label {
      color: var(--op-color-neutral-on-plus-max);
      font-size: var(--op-font-x-small);
      font-weight: var(--op-font-weight-semi-bold);
    }

    .accordion__marker {
      --__op-icon-font-size: var(--_op-icon-font-size-x-large);
      --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);

      justify-self: flex-end;
      transition: var(--op-transition-accordion);
      user-select: none;
    }
  }

  &::details-content {
    block-size: 0;
    transition: var(--op-transition-accordion-content);
  }

  &[open] {
    > summary .accordion__marker {
      rotate: 0.25turn;
    }

    &::details-content {
      block-size: auto;
    }
  }

  /* Modifiers */

  &.accordion--disable-animation {
    summary .accordion__marker {
      transition: none;
    }

    &::details-content {
      transition: none;
    }
  }
}
.alert {
  display: flex;
  align-items: center;
  padding: var(--op-space-x-small) var(--op-space-medium);
  border-radius: var(--op-radius-medium);
  gap: var(--op-space-small);

  /* Elements */

  .alert__icon {
    --__op-icon-font-size: var(--_op-icon-font-size-large);
    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
    --__op-icon-weight: var(--_op-icon-weight-bold);

    line-height: var(--op-line-height-dense);
  }

  .alert__messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--op-space-2x-small);
  }

  .alert__title {
    font-size: var(--op-font-medium);
    font-weight: var(--op-font-weight-medium);
  }

  .alert__description {
    font-size: var(--op-font-small);
  }

  /* Modifiers */

  &.alert--flash {
    position: fixed;
    z-index: var(--op-z-index-alert-group);
    animation: var(--op-animation-flash);
    inset-block-start: var(--op-space-large);
    inset-inline-end: var(--op-space-large);
  }

  &.alert--warning {
    background-color: var(--op-color-alerts-warning-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-plus-eight);

    .alert__title {
      color: var(--op-color-alerts-warning-on-plus-eight-alt);
    }

    &.alert--muted {
      background-color: var(--op-color-alerts-warning-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-warning-on-plus-five);

      .alert__title {
        color: var(--op-color-alerts-warning-on-plus-five-alt);
      }
    }

    &.alert--filled {
      background-color: var(--op-color-alerts-warning-base);
      box-shadow: none;
      color: var(--op-color-alerts-warning-on-base);

      .alert__title {
        color: var(--op-color-alerts-warning-on-base-alt);
      }
    }
  }

  /* alert--alert is an alias for alert--danger. See Alert.mdx for reasoning. */
  &.alert--danger,
  &.alert--alert {
    background-color: var(--op-color-alerts-danger-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-plus-eight);

    /* stylelint-disable no-descending-specificity */
    .alert__title {
      color: var(--op-color-alerts-danger-on-plus-eight-alt);
    }
    /* stylelint-enable no-descending-specificity */

    &.alert--muted {
      background-color: var(--op-color-alerts-danger-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-plus-five);

      .alert__title {
        color: var(--op-color-alerts-danger-on-plus-five-alt);
      }
    }

    &.alert--filled {
      background-color: var(--op-color-alerts-danger-base);
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-base);

      .alert__title {
        color: var(--op-color-alerts-danger-on-base-alt);
      }
    }
  }

  &.alert--info {
    background-color: var(--op-color-alerts-info-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-plus-eight);

    /* stylelint-disable no-descending-specificity */
    .alert__title {
      color: var(--op-color-alerts-info-on-plus-eight-alt);
    }
    /* stylelint-enable no-descending-specificity */

    &.alert--muted {
      background-color: var(--op-color-alerts-info-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-info-on-plus-five);

      .alert__title {
        color: var(--op-color-alerts-info-on-plus-five-alt);
      }
    }

    &.alert--filled {
      background-color: var(--op-color-alerts-info-base);
      box-shadow: none;
      color: var(--op-color-alerts-info-on-base);

      .alert__title {
        color: var(--op-color-alerts-info-on-base-alt);
      }
    }
  }

  &.alert--notice {
    background-color: var(--op-color-alerts-notice-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-plus-eight);

    /* stylelint-disable no-descending-specificity */
    .alert__title {
      color: var(--op-color-alerts-notice-on-plus-eight-alt);
    }
    /* stylelint-enable no-descending-specificity */

    &.alert--muted {
      background-color: var(--op-color-alerts-notice-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-notice-on-plus-five);

      .alert__title {
        color: var(--op-color-alerts-notice-on-plus-five-alt);
      }
    }

    &.alert--filled {
      background-color: var(--op-color-alerts-notice-base);
      box-shadow: none;
      color: var(--op-color-alerts-notice-on-base);

      .alert__title {
        color: var(--op-color-alerts-notice-on-base-alt);
      }
    }
  }
}
.avatar {
  /* Public API (customizable component options) */
  --_op-avatar-border-radius: var(--op-radius-circle);
  --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
  --_op-avatar-outer-border-color: var(--op-color-neutral-base);
  --_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
  --_op-avatar-outer-border-width: var(--op-border-width-large);
  --_op-avatar-disabled-opacity: var(--op-opacity-disabled);
  --_op-avatar-hover-opacity: var(--op-opacity-overlay);
  --_op-avatar-size-small: calc(8 * var(--op-size-unit)); /* 32px */
  --_op-avatar-size-medium: calc(10 * var(--op-size-unit)); /* 40px */
  --_op-avatar-size-large: calc(14 * var(--op-size-unit)); /* 56px */

  /* Private API (component option defaults) */
  --__op-avatar-size: var(--_op-avatar-size-large);

  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: var(--_op-avatar-border-radius);
  block-size: var(--__op-avatar-size);
  inline-size: var(--__op-avatar-size);
  min-block-size: var(--__op-avatar-size);
  min-inline-size: var(--__op-avatar-size);

  &::before {
    position: absolute;
    z-index: 2;
    content: '';
    inset: 0;
  }

  &::after {
    position: absolute;
    z-index: 3;
    border-radius: var(--_op-avatar-border-radius);
    box-shadow:
      inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color),
      inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
    content: '';
    inset: 0;
  }

  img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  /* Disabled State */
  &.avatar--disabled {
    opacity: var(--_op-avatar-disabled-opacity);
    pointer-events: none;
  }

  /* Focus State */
  &:focus,
  &:focus-visible,
  &:focus-within {
    outline: none;
  }

  /* Hover State */
  &:hover:not(div, .avatar--disabled) {
    --_op-avatar-inner-border-color: var(--op-color-primary-base);
    --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);

    cursor: pointer;

    &::before {
      background-color: var(--op-color-primary-base);
      opacity: var(--_op-avatar-hover-opacity);
    }
  }

  &:focus-visible:not(.avatar--disabled) {
    --_op-avatar-outer-border-color: var(--op-color-primary-base);

    cursor: pointer;
  }

  /* Size Modifiers */
  &.avatar--small {
    --__op-avatar-size: var(--_op-avatar-size-small);
  }

  &.avatar--medium {
    --__op-avatar-size: var(--_op-avatar-size-medium);
  }

  &.avatar--large {
    --__op-avatar-size: var(--_op-avatar-size-large);
  }
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-neutral-base);
  color: var(--op-color-neutral-on-base);
  cursor: inherit;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  gap: var(--op-space-x-small);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-dense);
  padding-block: var(--op-space-2x-small);
  padding-inline: var(--op-space-x-small);
  user-select: none;
  white-space: nowrap;

  /* Elements */

  .material-symbols-outlined {
    font-size: var(--op-font-small);
  }

  /* Modifiers */

  &.badge--primary {
    background-color: var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);
  }

  &.badge--warning {
    background-color: var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);
  }

  &.badge--danger {
    background-color: var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);
  }

  &.badge--info {
    background-color: var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-base);
  }

  &.badge--notice {
    background-color: var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-base);
  }

  &.badge--pill {
    border-radius: var(--op-radius-pill);
  }

  &.badge--notification-right {
    position: absolute;
    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
    inset-block-start: 0;
    inset-inline-end: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(50%);
  }

  &.badge--notification-left {
    position: absolute;
    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
    inset-block-start: 0;
    inset-inline-start: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-50%);
  }
}
.breadcrumbs {
  /* Public API (customizable component options) */
  --_op-breadcrumbs-font-size-small: var(--op-font-x-small);
  --_op-breadcrumbs-font-size-large: var(--op-font-small);

  /* Private API (component option defaults) */
  --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--op-space-x-small);

  /* Elements */
  .breadcrumbs__link {
    font-size: var(--__op-breadcrumbs-font-size);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .breadcrumbs__text {
    font-size: var(--__op-breadcrumbs-font-size);
    font-weight: var(--op-font-weight-bold);
  }

  /* Modifiers */
  &.breadcrumbs--small {
    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
  }

  &.breadcrumbs--large {
    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-large);
  }
}
.btn {
  /* Public API (customizable component options) */
  --_op-btn-height-small: var(--op-input-height-small);
  --_op-btn-height-medium: var(--op-input-height-medium);
  --_op-btn-height-large: var(--op-input-height-large);
  --_op-btn-font-small: var(--op-font-x-small);
  --_op-btn-font-medium: var(--op-font-small);
  --_op-btn-font-large: var(--op-font-small);
  --_op-btn-padding-small: 0 var(--op-space-x-small);
  --_op-btn-padding-medium: 0 var(--op-space-small);
  --_op-btn-padding-large: 0 var(--op-space-small);

  /* Private API (component option defaults) */
  --__op-btn-height: var(--_op-btn-height-large);
  --__op-btn-font-size: var(--_op-btn-font-large);
  --__op-btn-padding: var(--_op-btn-padding-large);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--__op-btn-padding);
  border-radius: var(--op-radius-medium);
  appearance: none;
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: pointer;
  font-size: var(--__op-btn-font-size);
  font-weight: var(--op-font-weight-normal);
  gap: var(--op-space-x-small);
  min-block-size: var(--__op-btn-height);
  text-align: center;
  text-decoration: none;
  transition: var(--op-transition-input);
  white-space: nowrap;

  /* Modifiers */

  /* Default Active State */
  &.btn--active {
    background-color: var(--op-color-primary-plus-five);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    color: var(--op-color-primary-on-plus-five);
  }

  /* Default Hover State */
  &:hover {
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    color: var(--op-color-primary-on-plus-eight);
  }

  /* Default Focus State */
  &:focus-visible {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: var(--op-input-focus-primary);
    color: var(--op-color-neutral-on-plus-eight);
  }

  /* Default Borderless State */
  &.btn--no-border {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-primary-on-plus-max);

    /* Default Borderless + Active State. */
    &.btn--active {
      background-color: var(--op-color-primary-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
      color: var(--op-color-primary-on-plus-five);
    }

    /* Default Borderless + Hover State */
    &:hover {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
      color: var(--op-color-primary-on-plus-eight);
    }

    /* Default Borderless + Focus State */
    &:focus-visible {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-plus-eight);
    }
  }

  /* Pill Modifier */
  &.btn--pill {
    border-radius: var(--op-radius-pill);
  }

  /* Icon Modifier */
  &.btn--icon {
    padding: 0;
    inline-size: var(--__op-btn-height);
    min-inline-size: var(--__op-btn-height);
  }

  /* Icon With Label Modifier */
  &.btn--icon-with-label {
    flex-direction: column;
    padding: var(--op-space-small);
    gap: var(--op-space-3x-small);
  }

  /* Size Modifiers */
  &.btn--small {
    --__op-btn-height: var(--_op-btn-height-small);
    --__op-btn-font-size: var(--_op-btn-font-small);
    --__op-btn-padding: var(--_op-btn-padding-small);
  }

  &.btn--medium {
    --__op-btn-height: var(--_op-btn-height-medium);
    --__op-btn-font-size: var(--_op-btn-font-medium);
    --__op-btn-padding: var(--_op-btn-padding-medium);
  }

  &.btn--large {
    --__op-btn-height: var(--_op-btn-height-large);
    --__op-btn-font-size: var(--_op-btn-font-large);
    --__op-btn-padding: var(--_op-btn-padding-large);
  }

  /* Disabled Modifier */
  &.btn--disabled,
  &:disabled {
    opacity: var(--op-opacity-disabled);
    pointer-events: none;
    -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
    user-select: none;
  }

  /* Button with notification style badge */
  &.btn--with-badge {
    position: relative;
  }

  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }

  /* https:/*uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/ */

  /* --op-breakpoint-small */
  @media (width <= 768px) {
    --__op-btn-height: var(--_op-btn-height-large);
    --__op-btn-font-size: var(--_op-btn-font-large);

    &.btn--small,
    &.btn--medium,
    &.btn--large {
      --__op-btn-height: var(--_op-btn-height-large);
      --__op-btn-font-size: var(--_op-btn-font-large);
      --__op-btn-padding: var(--_op-btn-padding-large);
    }
  }

  /* Variant Modifiers */
  &.btn--primary {
    background-color: var(--op-color-primary-base);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);

    /* Active State */
    &.btn--active {
      background-color: var(--op-color-primary-minus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
      color: var(--op-color-primary-on-minus-five);
    }

    /* Hover State */
    &:hover {
      background-color: var(--op-color-primary-plus-one);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
      color: var(--op-color-primary-on-plus-one);
    }

    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-primary-base);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-base);
    }

    /* Borderless State */
    &.btn--no-border {
      background-color: transparent;
      box-shadow: none;
      color: var(--op-color-primary-base);

      /* Borderless + Active State */
      &.btn--active {
        background-color: var(--op-color-primary-plus-five);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
        color: var(--op-color-primary-on-plus-five);
      }

      /* Borderless + Hover State */
      &:hover {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
        color: var(--op-color-primary-on-plus-eight);
      }

      /* Borderless + Focus State */
      &:focus-visible {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: var(--op-input-focus-primary);
        color: var(--op-color-primary-on-plus-eight);
      }
    }
  }

  &.btn--destructive,
  &.btn--delete {
    background-color: var(--op-color-alerts-danger-base);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);

    /* Active State */
    &.btn--active {
      background-color: var(--op-color-alerts-danger-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
      color: var(--op-color-alerts-danger-on-plus-five);
    }

    /* Hover State */
    &:hover {
      background-color: var(--op-color-alerts-danger-minus-two);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
      color: var(--op-color-alerts-danger-on-minus-two);
    }

    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-alerts-danger-base);
      box-shadow: var(--op-input-focus-danger);
      color: var(--op-color-alerts-danger-on-base);
    }
  }

  &.btn--warning {
    background-color: var(--op-color-alerts-warning-base);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);

    /* Active State */
    &.btn--active {
      background-color: var(--op-color-alerts-warning-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
      color: var(--op-color-alerts-warning-on-plus-five);
    }

    /* Hover State */
    &:hover {
      background-color: var(--op-color-alerts-warning-minus-two);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
      color: var(--op-color-alerts-warning-on-minus-two);
    }

    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-alerts-warning-base);
      box-shadow: var(--op-input-focus-warning);
      color: var(--op-color-alerts-warning-on-base);
    }
  }
}
.btn-group {
  --op-btn-group-hover-z-index: 1;
  --op-btn-group-active-z-index: 2;
  --op-btn-group-focus-z-index: 3;

  display: inline-flex;
  align-items: center;

  .btn {
    + .btn {
      margin-inline-start: calc(var(--op-border-width) * -1);
    }

    &:hover {
      z-index: var(--op-btn-group-hover-z-index);
    }

    &.btn--active {
      z-index: var(--op-btn-group-active-z-index);
    }

    &:focus,
    &:focus-within,
    &:focus-visible {
      z-index: var(--op-btn-group-focus-z-index);
    }

    &:not(:first-child, :last-child) {
      border-radius: 0;
    }

    &:first-child:not(:last-child) {
      border-end-end-radius: 0;
      border-start-end-radius: 0;
    }

    &:last-child:not(:first-child) {
      border-end-start-radius: 0;
      border-start-start-radius: 0;
    }
  }
}
.btn-group-toolbar {
  display: flex;
  flex-wrap: wrap;
}
.card {
  /* Public API (customizable component options) */
  --_op-card-padding: var(--op-space-medium);
  --_op-card-box-shadow: var(--op-border-all) var(--op-color-border);
  --_op-card-radius: var(--op-radius-medium);

  position: relative;
  border-radius: var(--_op-card-radius);
  background-color: var(--op-color-background);
  box-shadow: var(--_op-card-box-shadow);
  color: var(--op-color-on-background);
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-base);

  /* Modifiers */

  &.card--condensed {
    --_op-card-padding: var(--op-space-x-small);
  }

  &.card--padded {
    padding: var(--_op-card-padding);
  }

  &.card--shadow-x-small {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-small);
  }

  &.card--shadow-small {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-small);
  }

  &.card--shadow-medium {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-medium);
  }

  &.card--shadow-large {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-large);
  }

  &.card--shadow-x-large {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-large);
  }

  /* Elements */
  .card__header,
  .card__body,
  .card__footer {
    padding: var(--_op-card-padding);
  }

  .card__header {
    border-start-end-radius: var(--_op-card-radius);
    border-start-start-radius: var(--_op-card-radius);

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

  .card__footer {
    border-end-end-radius: var(--_op-card-radius);
    border-end-start-radius: var(--_op-card-radius);
  }
}
.confirm-dialog-wrapper {
  position: fixed;
  z-index: var(--op-z-index-dialog);
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  inset: 0;
  outline: 0;
  visibility: hidden;

  /* Elements */

  .confirm-dialog-wrapper__backdrop {
    position: fixed;
    z-index: var(--op-z-index-dialog-backdrop);
    background: var(--op-color-black);
    inset: 0;
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-modal);
    visibility: hidden;
  }

  /* Modifiers */

  &.confirm-dialog-wrapper--active {
    visibility: visible;

    .confirm-dialog {
      opacity: var(--op-opacity-full);
      transform: scale(1);
    }

    .confirm-dialog-wrapper__backdrop {
      opacity: var(--op-opacity-half);
      visibility: visible;
    }
  }
}
/* stylelint-disable no-descending-specificity */
.confirm-dialog {
  /* Public API (customizable component options) */
  --_op-confirm-dialog-width: calc(100 * var(--op-size-unit)); /* 400px */

  z-index: var(--op-z-index-dialog-content);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-background);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-on-background);
  contain: paint;
  font-size: var(--op-font-medium);
  inline-size: var(--_op-confirm-dialog-width);
  line-height: var(--op-line-height-base);
  opacity: var(--op-opacity-none);
  transform: scale(0.7);
  transition: var(--op-transition-modal);

  .confirm-dialog__header,
  .confirm-dialog__body,
  .confirm-dialog__footer {
    padding: var(--op-space-medium);
  }

  .confirm-dialog__header {
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semi-bold);
  }

  .confirm-dialog__body {
    box-shadow: var(--op-border-all) var(--op-color-border);
  }

  .confirm-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
/* stylelint-enable no-descending-specificity */
.content-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--op-space-medium);
  padding-block: var(--op-space-medium);

  .content-header__details {
    display: grid;
    gap: var(--op-space-3x-small);
  }

  .content-header__context {
    color: var(--op-color-on-background-alt);
    font-size: var(--op-font-small);
  }

  .content-header__title {
    margin: 0;
    color: var(--op-color-on-background);
    font-size: var(--op-font-2x-large);
    font-weight: var(--op-font-weight-medium);
  }

  .content-header__subline {
    color: var(--op-color-on-background-alt);
    font-size: var(--op-font-medium);
  }

  .content-header__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: end;
    gap: var(--op-space-2x-small);
    margin-inline-start: auto;
  }
}
.divider {
  /* Public API (customizable component options) */
  --_op-divider-vertical-min-height: var(--op-space-large);
  --_op-divider-height-small: var(--op-border-width);
  --_op-divider-height-medium: var(--op-border-width-large);
  --_op-divider-height-large: var(--op-border-width-x-large);
  --_op-divider-padding-small: var(--op-space-2x-small);
  --_op-divider-padding-medium: var(--op-space-x-small);
  --_op-divider-padding-large: var(--op-space-medium);

  /* Private API (component option defaults) */
  --__op-divider-height: var(--_op-divider-height-small);
  --__op-divider-padding: 0;
  background-color: var(--op-color-border);
  block-size: var(--__op-divider-height);
  inline-size: 100%;
  margin-block: var(--__op-divider-padding);
  margin-inline: 0;
  min-block-size: var(--__op-divider-height);

  /* Size Modifiers */
  &.divider--small {
    --__op-divider-height: var(--_op-divider-height-small);
  }

  &.divider--medium {
    --__op-divider-height: var(--_op-divider-height-medium);
  }

  &.divider--large {
    --__op-divider-height: var(--_op-divider-height-large);
  }

  /* Spacing Modifiers */
  &.divider--spacing-small {
    --__op-divider-padding: var(--_op-divider-padding-small);
  }

  &.divider--spacing-medium {
    --__op-divider-padding: var(--_op-divider-padding-medium);
  }

  &.divider--spacing-large {
    --__op-divider-padding: var(--_op-divider-padding-large);
  }

  /* Direction Modifier */
  &.divider--vertical {
    block-size: 100%;
    inline-size: var(--__op-divider-height);
    margin-block: 0;
    margin-inline: var(--__op-divider-padding);
    min-block-size: var(--_op-divider-vertical-min-height);
    min-inline-size: var(--__op-divider-height);
  }
}
.form-control {
  /* Public API (customizable component options) */
  --_op-form-control-height-small: var(--op-input-height-small);
  --_op-form-control-height-medium: var(--op-input-height-medium);
  --_op-form-control-height-large: var(--op-input-height-large);
  --_op-form-control-font-small: var(--op-font-x-small);
  --_op-form-control-font-medium: var(--op-font-small);
  --_op-form-control-font-large: var(--op-font-small);

  /* Private API (component option defaults) */
  --__op-form-control-height: var(--_op-form-control-height-large);
  --__op-form-control-font-size: var(--_op-form-control-font-large);
  block-size: var(--__op-form-control-height);
  min-inline-size: var(--__op-form-control-height);

  /* Size Modifiers */
  &.form-control--small {
    --__op-form-control-height: var(--_op-form-control-height-small);
    --__op-form-control-font-size: var(--_op-form-control-font-small);
  }

  &.form-control--medium {
    --__op-form-control-height: var(--_op-form-control-height-medium);
    --__op-form-control-font-size: var(--_op-form-control-font-medium);
  }

  &.form-control--large {
    --__op-form-control-height: var(--_op-form-control-height-large);
    --__op-form-control-font-size: var(--_op-form-control-font-large);
  }

  /* Disabled State */
  &:disabled {
    cursor: not-allowed;
    opacity: var(--_op-form-control-opacity-disabled);
  }

  /* Readonly State */
  &[readonly] {
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: var(--op-color-on-background);
    pointer-events: none;
    user-select: none;

    /* stylelint-disable selector-no-vendor-prefix */
    &::-webkit-input-placeholder {
      color: var(--op-color-on-background);
    }
    /* stylelint-enable selector-no-vendor-prefix */
  }
}
/* Radio or Checkbox Form Control */
.form-control:is([type='radio'], [type='checkbox']) {
  /* Public API (customizable component options) */
  --_op-form-control-height-small: var(--op-space-medium);
  --_op-form-control-height-medium: var(--op-space-large);
  --_op-form-control-height-large: var(--op-space-x-large);

  align-self: center;
  margin: 0;
  accent-color: var(--op-color-primary-base);
  block-size: var(--__op-form-control-height);
  cursor: pointer;
  inline-size: var(--__op-form-control-height);

  & + label {
    align-self: center;
  }
}
/* Any Form Control that is not a radio or checkbox */
.form-control:not([type='radio'], [type='checkbox']) {
  /* Public API (customizable component options) */
  --_op-form-control-opacity-disabled: var(--op-opacity-disabled);

  /* Private API (component option defaults) */
  --__op-form-control-border-color: var(--op-color-neutral-plus-four);

  display: block;
  border: none;
  border-radius: var(--op-radius-medium);
  appearance: none;
  background-color: var(--op-color-neutral-plus-eight);
  block-size: var(--__op-form-control-height);
  box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: text;
  font-size: var(--__op-form-control-font-size);
  inline-size: 100%;
  line-height: var(--op-line-height-base);
  min-inline-size: var(--__op-form-control-height);
  padding-block: var(--op-space-2x-small);
  padding-inline: var(--op-space-small) var(--op-space-x-small);

  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }

  /* Hover State */
  &:hover:not(:disabled, [readonly]) {
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
  }

  &:focus-visible:not([readonly]) {
    background-color: var(--op-color-primary-plus-seven);
    box-shadow: var(--op-input-focus-primary);
    color: var(--op-color-primary-on-plus-seven);
  }

  /* Borderless State */
  &.form-control--no-border {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-primary-on-plus-max);

    &:focus-visible:not([readonly]) {
      background-color: var(--op-color-primary-plus-seven);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-plus-seven);
    }

    /* Borderless + Hover State */
    &:hover:not(:disabled, [readonly]) {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
      color: var(--op-color-primary-on-plus-eight);
    }
  }
}
/* Color Form Control */
.form-control[type='color'] {
  padding: var(--op-space-2x-small);
  cursor: pointer;

  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  &::-webkit-color-swatch {
    border: none;
    border-radius: var(--op-radius-medium);
  }
}
/* File Form Control */
.form-control[type='file'] {
  padding-block: 0;

  &::file-selector-button {
    --__op-btn-base-height: var(--op-input-height-small);
    --__op-btn-height: var(--__op-btn-base-height);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--op-radius-medium);
    appearance: none;
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
    color: var(--op-color-neutral-on-plus-eight);
    cursor: pointer;
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-normal);
    gap: var(--op-space-x-small);
    margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
    min-block-size: var(--__op-btn-height);
    padding-block: 0;
    padding-inline: var(--op-space-x-small);
    text-align: center;
    text-decoration: none;
    transition: var(--op-transition-input);
    white-space: nowrap;
  }

  &.form-control--small::file-selector-button {
    --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
  }
}
select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
  appearance: none;
  background-image: var(--op-encoded-images-dropdown-arrow);
  background-position: center right;
  background-position-x: calc(
    100% - ((var(--op-space-3x-large) / 2) - (var(--op-encoded-images-dropdown-arrow-width) / 2))
  );
  background-repeat: no-repeat;
  cursor: pointer;
  padding-inline-end: var(--op-space-3x-large);
}
select.form-control[multiple] {
  min-block-size: calc(2 * var(--__op-form-control-height));
}
textarea.form-control:not([type='radio'], [type='checkbox']) {
  block-size: calc(2 * var(--__op-form-control-height));
  max-inline-size: 100%;
  min-block-size: var(--__op-form-control-height);
}
.form-label {
  color: var(--op-color-on-background);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-base);
}
.form-error {
  color: var(--op-color-alerts-danger-base);
  font-size: var(--op-font-x-small);
  inline-size: fit-content;
}
.form-hint {
  display: block;
  font-size: var(--op-font-small);
  font-style: italic;
}
.form-error-summary {
  padding: var(--op-space-large);
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-alerts-danger-plus-seven);
  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
  color: var(--op-color-alerts-danger-on-plus-seven);
  margin-block-end: var(--op-space-large);

  h2 {
    font-size: var(--op-font-medium);
  }

  ul {
    margin-block-end: 0;
  }
}
.form-group {
  display: grid;
  align-content: baseline;
  gap: var(--op-space-x-small);
  grid-auto-rows: auto;
  grid-template-columns: auto 1fr;
  padding-block: var(--op-space-small);
  padding-inline: 0;

  /* Group Alignment */
  /* stylelint-disable no-descending-specificity */
  .form-label,
  .form-error,
  .form-hint,
  .form-control:not([type='radio'], [type='checkbox']),
  .segmented-control {
    grid-column: 1 / 3;
  }
  /* stylelint-enable no-descending-specificity */

  .form-control[type='radio'],
  .form-control[type='checkbox'] {
    grid-column: 1 / 1;

    & + .form-label {
      grid-column: 2 / 3;
      grid-row: 1;
    }
  }
}
.form-group--inline {
  align-items: center;

  /* Group Alignment */

  /* stylelint-disable no-descending-specificity */
  .form-label {
    grid-column: unset;
  }

  .form-error,
  .form-hint {
    grid-column: 1 / 3;
  }

  .form-control:not([type='radio'], [type='checkbox']),
  .switch {
    grid-column: unset;
  }
  /* stylelint-enable no-descending-specificity */
}
.form-group--error {
  /* stylelint-disable no-descending-specificity */
  .form-control {
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);

    &[type='radio'],
    &[type='checkbox'] {
      box-shadow: none;

      & + label {
        color: var(--op-color-alerts-danger-minus-three);
        font-weight: var(--op-font-weight-bold);
      }
    }

    /* Error + Hover State */
    &:hover:not(:disabled, [readonly]) {
      background-color: var(--op-color-alerts-danger-plus-seven);
      box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-two);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }

    /* Readonly State */
    &[readonly] {
      box-shadow: none;
    }

    /* Error + Focus State */
    &:focus-visible:not([readonly]) {
      background-color: var(--op-color-alerts-danger-plus-seven);
      box-shadow: var(--op-input-focus-danger);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }

    /* Borderless State */
    &.form-control--no-border {
      border-radius: 0;
      box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);

      /* Readonly State */
      &[readonly] {
        box-shadow: none;
      }

      /* Borderless + Focus State */
      &:focus-visible:not([readonly]) {
        background-color: var(--op-color-alerts-danger-plus-seven);
        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
        color: var(--op-color-alerts-danger-on-plus-seven);
      }

      /* Borderless + Hover State */
      &:hover:not(:disabled, [readonly]) {
        background-color: var(--op-color-alerts-danger-plus-eight);
        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
        color: var(--op-color-alerts-danger-on-plus-eight);
      }
    }
  }
  /* stylelint-enable no-descending-specificity */
}
.icon {
  /* Public API (customizable component options) */

  /* Weight */
  --_op-icon-weight-light: var(--op-font-weight-light);
  --_op-icon-weight-normal: var(--op-font-weight-normal);
  --_op-icon-weight-semi-bold: var(--op-font-weight-semi-bold);
  --_op-icon-weight-bold: var(--op-font-weight-bold);

  /* Fill */
  --_op-icon-fill-outlined: 0;
  --_op-icon-fill-filled: 1;

  /* Emphasis */
  --_op-icon-emphasis-low: -20;
  --_op-icon-emphasis-normal: 0;
  --_op-icon-emphasis-high: 200;

  /* Size */
  --_op-icon-font-size-small: var(--op-font-small);
  --_op-icon-font-size-medium: var(--op-font-medium);
  --_op-icon-font-size-large: var(--op-font-large);
  --_op-icon-font-size-x-large: var(--op-font-2x-large);
  --_op-icon-optical-size-small: 20;
  --_op-icon-optical-size-medium: 20;
  --_op-icon-optical-size-large: 40;
  --_op-icon-optical-size-x-large: 48;

  /* Private API (component option defaults) */
  --__op-icon-weight: var(--_op-icon-weight-normal);
  --__op-icon-fill: var(--_op-icon-fill-outlined);
  --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
  --__op-icon-font-size: var(--_op-icon-font-size-medium);
  --__op-icon-optical-size: var(--_op-icon-optical-size-medium);

  display: inline-block;
  block-size: var(--__op-icon-font-size);
  font-size: var(--__op-icon-font-size);
  font-weight: var(--__op-icon-weight);
  inline-size: var(--__op-icon-font-size);
  line-height: var(--op-line-height-densest);
  vertical-align: middle;

  /* Fill Modifiers */
  &.icon--outlined {
    --__op-icon-fill: var(--_op-icon-fill-outlined);
  }

  &.icon--filled {
    --__op-icon-fill: var(--_op-icon-fill-filled);
  }

  /* Weight Modifiers */
  &.icon--weight-light {
    --__op-icon-weight: var(--_op-icon-weight-light);
  }

  &.icon--weight-normal {
    --__op-icon-weight: var(--_op-icon-weight-normal);
  }

  &.icon--weight-semi-bold {
    --__op-icon-weight: var(--_op-icon-weight-semi-bold);
  }

  &.icon--weight-bold {
    --__op-icon-weight: var(--_op-icon-weight-bold);
  }

  /* Emphasis */
  &.icon--low-emphasis {
    --__op-icon-emphasis: var(--_op-icon-emphasis-low);
  }

  &.icon--normal-emphasis {
    --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
  }

  &.icon--high-emphasis {
    --__op-icon-emphasis: var(--_op-icon-emphasis-high);
  }

  /* Size Modifiers */
  &.icon--small {
    --__op-icon-font-size: var(--_op-icon-font-size-small);
    --__op-icon-optical-size: var(--_op-icon-optical-size-small);
  }

  &.icon--medium {
    --__op-icon-font-size: var(--_op-icon-font-size-medium);
    --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
  }

  &.icon--large {
    --__op-icon-font-size: var(--_op-icon-font-size-large);
    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
  }

  &.icon--x-large {
    --__op-icon-font-size: var(--_op-icon-font-size-x-large);
    --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
  }
}
/* Material Icons class provided by the Google Fonts CDN */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' var(--__op-icon-fill),
    'wght' var(--__op-icon-weight),
    'GRAD' var(--__op-icon-emphasis),
    'opsz' var(--__op-icon-optical-size);
  font-weight: unset;
}
/* Custom SVG Icons app specific */
.custom-icons {
  svg {
    block-size: 100%;
    inline-size: 100%;
  }
}
.modal-wrapper {
  /* Public API (customizable component options) */
  --_op-modal-backdrop-active-opacity: var(--op-opacity-half);

  position: fixed;
  z-index: var(--op-z-index-dialog);
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  inset: 0;
  outline: 0;
  visibility: hidden;

  /* Elements */

  .modal-wrapper__backdrop {
    position: fixed;
    z-index: var(--op-z-index-dialog-backdrop);
    background: var(--op-color-black);
    inset: 0;
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-modal);
    visibility: hidden;
  }

  /* Modifiers */

  &.modal-wrapper--active {
    visibility: visible;

    .modal {
      opacity: var(--op-opacity-full);
      transform: scale(1);
    }

    .modal-wrapper__backdrop {
      opacity: var(--_op-modal-backdrop-active-opacity);
      visibility: visible;
    }
  }
}
.modal {
  /* Public API (customizable component options) */
  --_op-modal-width: calc(141 * var(--op-size-unit)); /* 564px */
  --_op-modal-max-height: calc(125 * var(--op-size-unit)); /* 500px */

  z-index: var(--op-z-index-dialog-content);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-background);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-on-background);
  contain: paint;
  font-size: var(--op-font-medium);
  inline-size: var(--_op-modal-width);
  line-height: var(--op-line-height-base);
  opacity: var(--op-opacity-none);
  transform: scale(0.7);
  transition: var(--op-transition-modal);

  .modal__header,
  .modal__body,
  .modal__footer {
    padding: var(--op-space-medium);
  }

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semi-bold);
  }

  .modal__body {
    box-shadow: var(--op-border-all) var(--op-color-border);
    max-block-size: var(--_op-modal-max-height);
    overflow-y: auto;
  }

  .modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--op-space-small);
  }
}
dialog.modal {
  padding: 0;
  border: none;
  overscroll-behavior: contain;
  transform: scale(0.7);
  transition:
    display var(--op-transition-modal-time) allow-discrete,
    overlay var(--op-transition-modal-time) allow-discrete,
    transform var(--op-transition-modal-time),
    opacity var(--op-transition-modal-time);

  &::backdrop {
    overflow: hidden;
    background-color: var(--op-color-black);
    opacity: var(--op-opacity-none);
    overscroll-behavior: contain;
    transition:
      display var(--op-transition-modal-time) allow-discrete,
      overlay var(--op-transition-modal-time) allow-discrete,
      transform var(--op-transition-modal-time),
      opacity var(--op-transition-modal-time);
  }

  &[open] {
    opacity: var(--op-opacity-full);
    transform: scale(1);

    &::backdrop {
      opacity: var(--op-opacity-half);
    }
  }
}
@starting-style {
  dialog.modal[open] {
    transform: scale(0.7);

    &::backdrop {
      opacity: var(--op-opacity-none);
    }
  }
}
.navbar {
  /* Public API (customizable component options) */

  /* Normal */
  --_op-navbar-background-color: var(--op-color-neutral-plus-eight);
  --_op-navbar-text-color: var(--op-color-neutral-on-plus-eight);
  --_op-navbar-border-color: var(--op-color-neutral-plus-four);
  --_op-navbar-brand-height: calc(12 * var(--op-size-unit)); /* 48px */

  /* Spacing */
  --_op-navbar-horizontal-spacing: var(--op-space-x-large);
  --_op-navbar-content-spacing: var(--op-space-x-small);
  --_op-navbar-content-item-spacing: var(--op-space-2x-small);

  display: flex;
  align-items: center;
  padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
  background-color: var(--_op-navbar-background-color);
  box-shadow:
    var(--op-border-top) var(--_op-navbar-border-color),
    var(--op-border-bottom) var(--_op-navbar-border-color);
  color: var(--_op-navbar-text-color);
  gap: var(--_op-navbar-content-spacing);

  /* Elements */

  .navbar__brand {
    block-size: var(--_op-navbar-brand-height);
    margin-inline-end: var(--_op-navbar-horizontal-spacing);

    img {
      block-size: 100%;
    }
  }

  .navbar__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--_op-navbar-content-item-spacing);

    &.navbar__content--justify-start {
      margin-inline-end: auto;
    }

    &.navbar__content--justify-center {
      margin-inline: auto;
    }

    &.navbar__content--justify-end {
      margin-inline-start: auto;
    }
  }

  /* Modifiers */

  &.navbar--primary {
    --_op-navbar-background-color: var(--op-color-primary-plus-six);
    --_op-navbar-text-color: var(--op-color-primary-on-plus-six);
    --_op-navbar-border-color: var(--op-color-primary-plus-four);
  }
}
.pagination {
  display: flex;
  align-items: center;
  gap: 0;

  /* Showing Dropdown */
  .form-group {
    align-items: center;

    .form-label {
      grid-column: 1;
    }

    .form-control {
      grid-column: 2;
    }
  }

  /* ... Gap */
  .pagination__divider {
    block-size: 100%;
    padding-inline: var(--op-space-x-small);
  }
}
.segmented-control {
  --op-input-inner-focus: 0 0 0 var(--op-border-width-large);
  --op-input-focus-primary:
    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
    var(--op-input-outer-focus) var(--op-color-primary-plus-five);

  /* Public API (customizable component options) */
  --_op-segmented-control-height-small: var(--op-input-height-small);
  --_op-segmented-control-height-medium: var(--op-input-height-medium);
  --_op-segmented-control-height-large: var(--op-input-height-large);

  --_op-segmented-control-font-small: var(--op-font-x-small);
  --_op-segmented-control-font-medium: var(--op-font-small);
  --_op-segmented-control-font-large: var(--op-font-small);

  --_op-segmented-control-label-padding-small: var(--op-space-x-small);
  --_op-segmented-control-label-padding-medium: var(--op-space-small);
  --_op-segmented-control-label-padding-large: var(--op-space-small);

  --_op-segmented-control-label-gap-small: var(--op-space-3x-small);
  --_op-segmented-control-label-gap-medium: var(--op-space-2x-small);
  --_op-segmented-control-label-gap-large: var(--op-space-2x-small);

  --_op-segmented-control-color-icon-default: var(--op-color-neutral-on-plus-eight-alt);
  --_op-segmented-control-color-icon-active: light-dark(
    var(--op-color-primary-plus-four),
    var(--op-color-primary-minus-six)
  );

  /* Private API (component option defaults) */
  --__op-segmented-control-height: var(--_op-segmented-control-height-large);
  --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
  --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-default);

  position: relative;
  display: grid;
  padding: var(--op-space-2x-small);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-neutral-plus-eight);
  block-size: var(--__op-segmented-control-height);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--__op-segmented-control-font-size);
  gap: var(--op-space-2x-small);
  grid-auto-flow: column;
  inline-size: fit-content;

  &.segmented-control--full-width {
    inline-size: 100%;
  }

  .icon {
    color: var(--__op-segmented-control-color-icon);
  }

  .segmented-control__input {
    position: absolute;
    overflow: hidden;
    padding: 0;
    border-width: 0;
    margin: -1px;
    block-size: 1px;
    clip: rect(0, 0, 0, 0);
    inline-size: 1px;
    white-space: nowrap;

    /* Selected Option */
    &:checked + .segmented-control__label {
      --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-active);

      background-color: var(--op-color-primary-plus-one);
      color: var(--op-color-primary-on-plus-one);
    }

    &:focus-visible {
      + .segmented-control__label {
        box-shadow: var(--op-input-focus-primary);
      }
    }
  }

  .segmented-control__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--op-radius-small);
    gap: var(--__op-segmented-control-label-gap);
    padding-inline: var(--__op-segmented-control-label-padding);
    white-space: nowrap;

    &:hover {
      background-color: var(--op-color-neutral-plus-five);
      color: var(--op-color-neutral-on-plus-five);
    }
  }

  /* Size Modifiers */
  &.segmented-control--small {
    --__op-segmented-control-height: var(--_op-segmented-control-height-small);
    --__op-segmented-control-font-size: var(--_op-segmented-control-font-small);
    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-small);
    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-small);

    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-small);
      --__op-icon-optical-size: var(--_op-icon-optical-size-small);
    }
  }

  &.segmented-control--medium {
    --__op-segmented-control-height: var(--_op-segmented-control-height-medium);
    --__op-segmented-control-font-size: var(--_op-segmented-control-font-medium);
    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-medium);
    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-medium);

    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-medium);
      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
    }
  }

  &.segmented-control--large {
    --__op-segmented-control-height: var(--_op-segmented-control-height-large);
    --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);

    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-medium);
      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
    }
  }
}
.sidebar {
  /* Public API (customizable component options) */

  /* Normal */
  --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
  --_op-sidebar-border-color: var(--op-color-neutral-plus-four);

  /* Width */
  --_op-sidebar-rail-width: calc(22 * var(--op-size-unit)); /* 88px */
  --_op-sidebar-compact-width: calc(42 * var(--op-size-unit)); /* 168px */
  --_op-sidebar-drawer-width: calc(54 * var(--op-size-unit)); /* 216px */
  --_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit)); /* 76px */
  --_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
  --_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit)); /* 96px */

  /* Spacing */
  --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
  --_op-sidebar-brand-spacing: var(--op-space-medium);
  --_op-sidebar-content-spacing: var(--op-space-x-small);
  --_op-sidebar-content-item-spacing: var(--op-space-2x-small);

  /* Animation */
  --_op-sidebar-transition: var(--op-transition-sidebar);

  /* Private API (component option defaults) */
  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);

  z-index: var(--op-z-index-sidebar);
  display: flex;
  flex-direction: column;
  background-color: var(--_op-sidebar-background-color);
  box-shadow:
    var(--op-border-left) var(--_op-sidebar-border-color),
    var(--op-border-right) var(--_op-sidebar-border-color);
  color: var(--_op-sidebar-text-color);
  inline-size: var(--__op-sidebar-width);
  min-inline-size: var(--__op-sidebar-width);
  overflow-y: auto;
  transition: var(--_op-sidebar-transition);

  /* Elements */
  .sidebar__brand {
    padding: var(--_op-sidebar-brand-spacing);
    block-size: var(--__op-sidebar-brand-width);
    margin-inline: auto;

    img {
      block-size: 100%;
    }
  }

  .sidebar__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--_op-sidebar-content-item-spacing);
    padding-inline: var(--_op-sidebar-content-spacing);

    > * {
      justify-content: flex-start;

      .material-symbols-outlined {
        --__op-icon-font-size: var(--_op-icon-font-size-large);
        --__op-icon-optical-size: var(--_op-icon-optical-size-large);
        --__op-icon-weight: var(--_op-icon-weight-bold);
      }
    }

    &.sidebar__content--start {
      justify-content: start;
    }

    &.sidebar__content--center {
      justify-content: center;
    }

    &.sidebar__content--end {
      justify-content: end;
    }
  }

  /* Modifiers */
  &.sidebar--padded {
    padding-block: var(--_op-sidebar-spacing);
  }

  /* Drawer Modifier */
  &.sidebar--drawer {
    /* Private API */
    --__op-sidebar-width: var(--_op-sidebar-drawer-width);
    --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
  }

  /* Compact Modifier */
  &.sidebar--compact {
    /* Private API (component option defaults) */
    --__op-sidebar-width: var(--_op-sidebar-compact-width);
    --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);

    /* Elements */
    .sidebar__content {
      > * {
        /* Need to get icon-with-label behavior */
        flex-direction: column;
        padding: var(--op-space-small);
        gap: var(--op-space-3x-small);
      }
    }
  }

  &.sidebar--rail {
    /* Private API (component option defaults) */
    --__op-sidebar-width: var(--_op-sidebar-rail-width);
    --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);

    /* Elements */
    .sidebar__content {
      align-items: center;

      > * {
        justify-content: center;
        padding: 0;
        font-size: 0;
        gap: 0;

        /* Need to get icon behavior */
        inline-size: var(--__op-btn-height);
        min-inline-size: var(--__op-btn-height);
      }
    }
  }

  /* Primary */
  &.sidebar--primary {
    --_op-sidebar-background-color: var(--op-color-primary-plus-six);
    --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
    --_op-sidebar-border-color: var(--op-color-primary-plus-four);
  }
}
.side-panel {
  /* Public API (customizable component options) */
  --_op-side-panel-width: calc(54 * var(--op-size-unit)); /* 216px */
  --_op-side-panel-header-padding: var(--op-space-medium);
  --_op-side-panel-body-padding: var(--op-space-medium);
  --_op-side-panel-footer-padding: var(--op-space-medium);
  --_op-side-panel-section-padding: var(--op-space-medium);

  display: flex;
  flex-direction: column;
  background-color: var(--op-color-background);
  block-size: 100vh;
  color: var(--op-color-on-background);
  inline-size: var(--_op-side-panel-width);
  max-block-size: 100%;
  min-inline-size: var(--_op-side-panel-width);

  /* Modifiers */
  &.side-panel--border-left {
    box-shadow: var(--op-border-left) var(--op-color-border);
  }

  &.side-panel--border-right {
    box-shadow: var(--op-border-right) var(--op-color-border);
  }

  &.side-panel--border-left.side-panel--border-right {
    box-shadow: var(--op-border-x);
  }

  /* Elements */
  .side-panel__header {
    &.side-panel__header--padded {
      padding: var(--_op-side-panel-header-padding);
    }

    &.side-panel__header--padded-x {
      padding-inline: var(--_op-side-panel-header-padding);
    }

    &.side-panel__header--padded-y {
      padding-block: var(--_op-side-panel-header-padding);
    }
  }

  .side-panel__body {
    flex: 1;
    overflow-y: auto;

    &.side-panel__body--padded {
      padding: var(--_op-side-panel-body-padding);
    }

    &.side-panel__body--padded-x {
      padding-inline: var(--_op-side-panel-body-padding);
    }

    &.side-panel__body--padded-y {
      padding-block: var(--_op-side-panel-body-padding);
    }
  }

  .side-panel__footer {
    &.side-panel__footer--padded {
      padding: var(--_op-side-panel-footer-padding);
    }

    &.side-panel__footer--padded-x {
      padding-inline: var(--_op-side-panel-footer-padding);
    }

    &.side-panel__footer--padded-y {
      padding-block: var(--_op-side-panel-footer-padding);
    }
  }

  .side-panel__section {
    &.side-panel__section--padded {
      padding: var(--_op-side-panel-section-padding);
    }

    &.side-panel__section--padded-x {
      padding-inline: var(--_op-side-panel-section-padding);
    }

    &.side-panel__section--padded-y {
      padding-block: var(--_op-side-panel-section-padding);
    }
  }
}
.spinner {
  /* Public API (customizable component options) */
  --_op-spinner-indicator-color: var(--op-color-primary-base);
  --_op-spinner-track-color: var(--op-color-neutral-plus-four);
  --_op-spinner-track-width-x-small: var(--op-border-width);
  --_op-spinner-track-width-small: var(--op-border-width-large);
  --_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
  --_op-spinner-track-width-large: var(--op-border-width-x-large);
  --_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit)); /* 24px */
  --_op-spinner-diameter-small: calc(10 * var(--op-size-unit)); /* 40px */
  --_op-spinner-diameter-medium: calc(15 * var(--op-size-unit)); /* 60px */
  --_op-spinner-diameter-large: calc(20 * var(--op-size-unit)); /* 80px */
  --_op-spinner-animation-duration: 0.8s;
  --_op-spinner-animation-timing-function: linear;

  /* Private API (component option defaults) */
  --__op-spinner-diameter: var(--_op-spinner-diameter-large);
  --__op-spinner-track-width: var(--_op-spinner-track-width-large);

  border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
  border-radius: var(--__op-spinner-diameter);
  animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
  block-size: var(--__op-spinner-diameter);
  border-block-start-color: var(--_op-spinner-indicator-color);
  inline-size: var(--__op-spinner-diameter);

  &.spinner--x-small {
    --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
    --__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
  }

  &.spinner--small {
    --__op-spinner-diameter: var(--_op-spinner-diameter-small);
    --__op-spinner-track-width: var(--_op-spinner-track-width-small);
  }

  &.spinner--medium {
    --__op-spinner-diameter: var(--_op-spinner-diameter-medium);
    --__op-spinner-track-width: var(--_op-spinner-track-width-medium);
  }

  &.spinner--large {
    --__op-spinner-diameter: var(--_op-spinner-diameter-large);
    --__op-spinner-track-width: var(--_op-spinner-track-width-large);
  }
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.switch {
  /* Public API (allowed to be overridden) */
  --_op-switch-height-small: calc(4 * var(--op-size-unit)); /* 16px */
  --_op-switch-height-large: calc(6 * var(--op-size-unit)); /* 24px */
  --_op-switch-width-small: calc(7 * var(--op-size-unit)); /* 28px */
  --_op-switch-width-large: calc(11 * var(--op-size-unit)); /* 44px */
  --_op-switch-opacity-disabled: var(--op-opacity-disabled);
  --_op-switch-switch-padding: var(--op-space-2x-small);

  /* Private API (don't touch these) */
  --__op-switch-width: var(--_op-switch-width-large);
  --__op-switch-height: var(--_op-switch-height-large);
  --__op-switch-switch-size: calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
  --__op-switch-half-switch-padding: calc(var(--_op-switch-switch-padding) / 2);

  position: relative;
  display: flex;
  align-items: center;

  label {
    position: relative;
    display: block;
    border-radius: var(--op-radius-pill);
    background: var(--op-color-neutral-base);
    block-size: var(--__op-switch-height);
    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
    inline-size: var(--__op-switch-width);
    text-indent: -9999px; /* Normally text would not be put in the label, but this hides it in case you do put text in the label */

    &::after {
      position: absolute;
      border-radius: var(--op-radius-circle);
      background-color: var(--op-color-neutral-plus-eight);
      block-size: var(--__op-switch-switch-size);
      content: '';
      inline-size: var(--__op-switch-switch-size);
      inset-block-start: var(--__op-switch-half-switch-padding);
      inset-inline-start: var(--__op-switch-half-switch-padding);
      transition: var(--op-transition-input);
    }
  }

  /* Prevent labels after the toggle being full width */
  & + label {
    inline-size: fit-content;
  }

  input {
    block-size: 0;
    inline-size: 0;
    margin-inline-end: calc(-1 * var(--op-space-x-small));

    &:disabled {
      visibility: hidden;
    }

    &:disabled + label {
      cursor: not-allowed;
      opacity: var(--_op-switch-opacity-disabled);
    }

    &:checked + label {
      background-color: var(--op-color-primary-base);
      box-shadow: none;

      &::after {
        inset-inline-start: calc(100% - var(--__op-switch-half-switch-padding));
        transform: translateX(-100%);
      }
    }

    &:hover + label {
      &::after {
        background-color: var(--op-color-primary-plus-five);
      }
    }

    &:focus-visible + label {
      box-shadow:
        0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six),
        inset var(--op-border-all) var(--op-color-primary-minus-three);

      &::after {
        background-color: var(--op-color-neutral-plus-five);
        box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
      }
    }

    &:focus-visible:checked + label {
      &::after {
        background-color: var(--op-color-primary-plus-six);
        box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
      }
    }
  }

  /* Size Modifiers */
  &.switch--small {
    --__op-switch-width: var(--_op-switch-width-small);
    --__op-switch-height: var(--_op-switch-height-small);
  }

  &.switch--large {
    --__op-switch-width: var(--_op-switch-width-large);
    --__op-switch-height: var(--_op-switch-height-large);
  }
}
.tab-group {
  display: flex;
  align-items: center;
}
.tab {
  /* Public API */
  --_op-tab-font-small: var(--op-font-x-small);
  --_op-tab-font-large: var(--op-font-small);
  --_op-tab-padding-small: calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
  --_op-tab-padding-large: var(--op-space-x-small) var(--op-space-medium) var(--op-space-small) var(--op-space-medium);
  --_op-tab-indicator-width-small: var(--op-border-width-large);
  --_op-tab-indicator-width-large: var(--op-border-width-x-large);
  --_op-tab-disabled-opacity: var(--op-opacity-disabled);

  /* Private API */
  --__op-tab-font-size: var(--_op-tab-font-large);
  --__op-tab-padding: var(--_op-tab-padding-large);
  --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
  --__op-tab-indicator: inset 0 calc(-1 * var(--__op-tab-indicator-width)) 0 0;

  padding: var(--__op-tab-padding);
  background-color: var(--op-color-background);
  color: var(--op-color-on-background);
  font-size: var(--__op-tab-font-size);
  text-decoration: none;

  &.tab--active {
    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
  }

  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }

  /* Hover State */
  &:hover {
    background-color: var(--op-color-primary-plus-seven);
    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
    color: var(--op-color-primary-on-plus-seven);
  }

  /* Focus State */
  &:focus-visible:not(.tab--disabled) {
    z-index: 1;
    box-shadow: var(--op-input-focus-primary);

    &.tab--active {
      box-shadow:
        var(--__op-tab-indicator) var(--op-color-primary-plus-one),
        var(--op-input-focus-primary);
    }
  }

  /* Disabled State */
  &.tab--disabled {
    opacity: var(--_op-tab-disabled-opacity);
    pointer-events: none;
  }

  /* Size Modifiers */
  &.tab--small {
    --__op-tab-padding: var(--_op-tab-padding-small);
    --__op-tab-font-size: var(--_op-tab-font-small);
    --__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
  }

  &.tab--large {
    --__op-tab-padding: var(--_op-tab-padding-large);
    --__op-tab-font-size: var(--_op-tab-font-large);
    --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
  }
}
.table {
  /* Public API */

  /* Cells (for height, the appropriate variable is used when using the density modifiers) */
  --_op-table-cell-height-default: calc(11 * var(--op-size-unit)); /* 44px */
  --_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit)); /* 64px */
  --_op-table-cell-height-compact: calc(8 * var(--op-size-unit)); /* 32px */

  /* Private API */

  /* These allow for overriding specific padding versions easier. */
  --__op-table-cell-height: var(--_op-table-cell-height-default);

  border-radius: var(--op-radius-medium);
  border-collapse: collapse;
  box-shadow: var(--op-border-all) var(--op-color-border);
  contain: paint;
  inline-size: 100%;
  table-layout: auto;

  /* Elements */

  thead {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: inset var(--op-border-top) var(--op-color-border);
    color: var(--op-color-neutral-on-plus-eight);

    &:has(th input[type='checkbox']:checked) {
      background-color: var(--op-color-primary-plus-seven);
      color: var(--op-color-primary-on-plus-seven);
    }
  }

  th {
    font-weight: var(--op-font-weight-semi-bold);
    text-align: start;
  }

  tbody,
  tfoot {
    background-color: var(--op-color-neutral-plus-max);
    color: var(--op-color-neutral-on-plus-max);
  }

  th,
  td {
    block-size: var(--__op-table-cell-height);
    font-size: var(--op-font-small);
    padding-block: var(--op-space-2x-small);
    padding-inline: var(--op-space-small);
  }

  tfoot tr {
    box-shadow: var(--op-border-top) var(--op-color-border);
  }

  tr:not(:last-child) {
    box-shadow: inset var(--op-border-top) var(--op-color-border);
  }

  /* Modifiers */

  /* stylelint-disable no-descending-specificity */
  &.table--primary {
    thead {
      background-color: var(--op-color-primary-plus-seven);
      color: var(--op-color-primary-on-plus-seven);
    }
  }

  &.table--danger {
    thead {
      background-color: var(--op-color-alerts-danger-plus-seven);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }
  }
  /* stylelint-enable no-descending-specificity */

  &.table--container {
    overflow-y: auto;
  }

  /* Layout Modifiers */
  &.table--auto-layout {
    table-layout: auto;
  }

  &.table--fixed-layout {
    table-layout: fixed;
  }

  /* Table Density Modifiers */
  &.table--default-density {
    --__op-table-cell-height: var(--_op-table-cell-height-default);
  }

  &.table--comfortable-density {
    --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
  }

  &.table--compact-density {
    --__op-table-cell-height: var(--_op-table-cell-height-compact);
  }

  /* Striped Modifiers */
  &.table--even-striped {
    tbody tr:nth-child(even) {
      background-color: var(--op-color-neutral-plus-seven);
      color: var(--op-color-neutral-on-plus-seven);
    }
  }

  &.table--odd-striped {
    tbody tr:nth-child(odd) {
      background-color: var(--op-color-neutral-plus-seven);
      color: var(--op-color-neutral-on-plus-seven);
    }
  }

  /* Sticky Header Row Modifier */
  /* stylelint-disable no-descending-specificity */
  &.table--sticky-header thead {
    position: sticky;
    inset-block-start: 0;
  }
  /* stylelint-enable no-descending-specificity */

  /* Sticky Footer Row Modifier */
  &.table--sticky-footer tfoot {
    position: sticky;
    inset-block-end: 0;
  }
}
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--op-space-2x-small);
  border-radius: var(--op-radius-pill);
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-dense);
  user-select: none;
  white-space: nowrap;

  /* Elements */

  .tag__label {
    padding-inline: var(--op-space-2x-small);
  }

  .btn--icon {
    --__op-btn-height: var(--op-font-medium);

    /* Hover State */
    &:hover {
      background-color: var(--op-color-neutral-minus-three);
      box-shadow: none;
      color: var(--op-color-neutral-on-minus-three);
    }

    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-neutral-base);
      box-shadow: var(--op-input-focus-neutral);
      color: var(--op-color-neutral-on-base);
    }
  }

  /* Modifiers */

  &.tag--read-only {
    /* This is here for consistency */
  }

  &.tag--primary {
    background-color: var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);

    .btn--icon {
      color: var(--op-color-primary-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-primary-minus-three);
        box-shadow: none;
        color: var(--op-color-primary-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-primary-base);
        box-shadow: var(--op-input-focus-primary);
        color: var(--op-color-primary-on-base);
      }
    }
  }

  &.tag--danger {
    background-color: var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);

    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-danger-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-danger-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-danger-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-danger-base);
        box-shadow: var(--op-input-focus-danger);
        color: var(--op-color-alerts-danger-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }

  &.tag--warning {
    background-color: var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);

    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-warning-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-warning-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-warning-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-warning-base);
        box-shadow: var(--op-input-focus-warning);
        color: var(--op-color-alerts-warning-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }

  &.tag--info {
    background-color: var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-base);

    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-info-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-info-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-info-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-info-base);
        box-shadow: var(--op-input-focus-info);
        color: var(--op-color-alerts-info-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }

  &.tag--notice {
    background-color: var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-base);

    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-notice-on-base);

      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-notice-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-notice-on-minus-three);
      }

      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-notice-base);
        box-shadow: var(--op-input-focus-notice);
        color: var(--op-color-alerts-notice-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }
}
.text-pair {
  /* Public API (customizable component options) */
  --_op-text-pair-font-size-small: var(--op-font-small);
  --_op-text-pair-font-size-medium: var(--op-font-medium);
  --_op-text-pair-font-size-large: var(--op-font-large);

  /* Private API (component option defaults) */
  --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
  --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);

  display: flex;
  flex-direction: column;

  /* zero specificity. Lets utilities override */
  :where(&) {
    gap: var(--op-space-x-small);
  }

  &.text-pair--inline {
    flex-direction: row;
    align-items: baseline;
  }

  .text-pair__title {
    font-size: var(--__op-text-pair-title-font-size);
    font-weight: var(--op-font-weight-semi-bold);
    line-height: var(--op-line-height-dense);

    &.text-pair__title--small {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-small);
    }

    &.text-pair__title--medium {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
    }

    &.text-pair__title--large {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-large);
    }
  }

  .text-pair__subtitle {
    font-size: var(--__op-text-pair-subtitle-font-size);
    font-weight: var(--op-font-weight-normal);
    line-height: var(--op-line-height-dense);

    &.text-pair__subtitle--small {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
    }

    &.text-pair__subtitle--medium {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-medium);
    }

    &.text-pair__subtitle--large {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-large);
    }
  }
}
/* Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */
[data-tooltip-text] {
  /* Public API (customizable component options) */
  --_op-tooltip-max-width: calc(50 * var(--op-size-unit)); /* 200px */
  --_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
  --_op-tooltip-background-color: var(--op-color-neutral-minus-max);
  --_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
  --_op-tooltip-arrow-size: calc(var(--op-space-small) / 2);
  --_op-tooltip-tooltip-offset: var(--op-space-x-small);
  --_op-tooltip-tooltip-radius: var(--op-radius-medium);
  --_op-tooltip-tooltip-font-size: var(--op-font-small);

  position: relative;

  &::before,
  &::after {
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-tooltip);
    visibility: hidden;
  }

  &::before {
    position: absolute;
    z-index: var(--op-z-index-tooltip);
    display: block;
    padding: var(--_op-tooltip-padding);
    border-radius: var(--_op-tooltip-tooltip-radius);
    background-color: var(--_op-tooltip-background-color);
    color: var(--_op-tooltip-text-color);
    content: attr(data-tooltip-text);
    font-family: var(--op-font-family); /* Makes tooltips on icons work */
    font-size: var(--_op-tooltip-tooltip-font-size);
    inline-size: max-content;
    max-inline-size: var(--_op-tooltip-max-width);
    overflow-wrap: break-word;
    pointer-events: none;
    text-align: center;
    white-space: normal;
  }

  &::after {
    position: absolute;
    z-index: var(--op-z-index-tooltip);
    border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
    content: '';
    pointer-events: none;
  }

  &:hover {
    &::before,
    &::after {
      opacity: var(--op-opacity-full);
      visibility: visible;
    }
  }

  &[data-tooltip-position='top'],
  &:not([data-tooltip-position]) {
    &::before,
    &::after {
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }

    &::before {
      inset-block-end: 100%;
      margin-block-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }

    &::after {
      border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
      inset-block-end: 100%;
      margin-block-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
  }

  &[data-tooltip-position='left'] {
    &::before,
    &::after {
      inset-block-start: 50%;
      transform: translateY(-50%);
    }

    &::before {
      inset-inline-end: 100%;
      margin-inline-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }

    &::after {
      border-color: transparent transparent transparent var(--_op-tooltip-background-color);
      inset-inline-end: 100%;
      margin-inline-end: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
  }

  &[data-tooltip-position='bottom'] {
    &::before,
    &::after {
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }

    &::before {
      inset-block-start: 100%;
      margin-block-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }

    &::after {
      border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
      inset-block-start: 100%;
      margin-block-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
  }

  &[data-tooltip-position='right'] {
    &::before,
    &::after {
      inset-block-start: 50%;
      transform: translateY(-50%);
    }

    &::before {
      inset-inline-start: 100%;
      margin-inline-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }

    &::after {
      border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
      inset-inline-start: 100%;
      margin-inline-start: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
  }
}