@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_back,arrow_downward,arrow_left,arrow_right,backup,calendar_month,cancel,check,check_circle,chevron_right,close,content_copy,delete,edit,error,help,home,info,open_in_new,search,warning&display=block");
@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";
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;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]) {
  -webkit-text-decoration-skip: ink;
          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 */
/* Tokens */
:root {
  /**
  * @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)); /* 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) * .2); /* 2px */
  --op-space-2x-small: calc(var(--op-space-scale-unit) * .4); /* 4px */
  --op-space-x-small: calc(var(--op-space-scale-unit) * .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 */
  /* 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 {
  /* 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%;
  /* 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%);
}

: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: 80%;
}

.three-fifths-width {
  inline-size: 60%;
}

.two-fifths-width {
  inline-size: 40%;
}

.one-fifth-width {
  inline-size: 20%;
}

.three-quarters-width {
  inline-size: 75%;
}

.one-quarter-width {
  inline-size: 25%;
}

.two-thirds-width {
  inline-size: 66.6666666667%;
}

.one-third-width {
  inline-size: 33.3333333333%;
}

/* 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(25%);
  }
  &.op-grid--4-column {
    --_op-grid-max-column-size: calc(20%);
  }
  &.op-grid--5-column {
    --_op-grid-max-column-size: calc(50% / 3);
  }
  &.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%;
    -o-object-fit: cover;
       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);
      -webkit-user-select: none;
         -moz-user-select: none;
              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%;
    -o-object-fit: cover;
       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);
  -webkit-user-select: none;
     -moz-user-select: none;
          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);
  -webkit-appearance: none;
     -moz-appearance: none;
          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 */
    -moz-user-select: none;
         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) {
  .btn {
    --__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);
    }
  }
}
.btn {
  /* 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;
    -webkit-user-select: none;
       -moz-user-select: 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);
  -webkit-appearance: none;
     -moz-appearance: none;
          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);
    -webkit-appearance: none;
       -moz-appearance: none;
            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]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          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: -moz-fit-content;
  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;
  /* SVG (.icon--svg) */
  --_op-icon-stroke-width-light: 1;
  --_op-icon-stroke-width-normal: 1.5;
  --_op-icon-stroke-width-semi-bold: 2;
  --_op-icon-stroke-width-bold: 2.5;
  --_op-icon-svg-opacity-low-emphasis: 0.6;
  /* 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);
    --__op-icon-stroke-width: var(--_op-icon-stroke-width-light);
  }
  &.icon--weight-normal {
    --__op-icon-weight: var(--_op-icon-weight-normal);
    --__op-icon-stroke-width: var(--_op-icon-stroke-width-normal);
  }
  &.icon--weight-semi-bold {
    --__op-icon-weight: var(--_op-icon-weight-semi-bold);
    --__op-icon-stroke-width: var(--_op-icon-stroke-width-semi-bold);
  }
  &.icon--weight-bold {
    --__op-icon-weight: var(--_op-icon-weight-bold);
    --__op-icon-stroke-width: var(--_op-icon-stroke-width-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);
  }
  /* SVG Modifier: an inline SVG instead of a font glyph, e.g. `icon icon--svg icon--large` */
  &.icon--svg {
    svg {
      display: block;
      block-size: 100%;
      inline-size: 100%;
    }
    /* A rule on the <svg> root cannot beat a stroke-width attribute on a child, so target the attribute.
       With no weight modifier the set keeps the widths it was drawn with. */
    &:is(.icon--weight-light, .icon--weight-normal, .icon--weight-semi-bold, .icon--weight-bold) svg [stroke-width] {
      stroke-width: var(--__op-icon-stroke-width);
    }
    &.icon--low-emphasis {
      opacity: var(--_op-icon-svg-opacity-low-emphasis);
    }
  }
}

/* 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: -moz-fit-content;
  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: -moz-fit-content;
    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 */
  /* The *-layout names are kept for backwards compatibility */
  &.table--layout-auto,
  &.table--auto-layout {
    table-layout: auto;
  }
  &.table--layout-fixed,
  &.table--fixed-layout {
    table-layout: fixed;
  }
  /* Table Density Modifiers */
  /* The *-density names are kept for backwards compatibility */
  &.table--density-default,
  &.table--default-density {
    --__op-table-cell-height: var(--_op-table-cell-height-default);
  }
  &.table--density-comfortable,
  &.table--comfortable-density {
    --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
  }
  &.table--density-compact,
  &.table--compact-density {
    --__op-table-cell-height: var(--_op-table-cell-height-compact);
  }
  /* Striped Modifiers */
  /* The *-striped names are kept for backwards compatibility */
  &.table--striped-even,
  &.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--striped-odd,
  &.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);
  -webkit-user-select: none;
     -moz-user-select: none;
          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: -moz-max-content;
    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));
    }
  }
}

:root,
:host,
.sl-theme-light {
  color-scheme: light;
  --sl-color-gray-50: hsl(0 0% 97.5%);
  --sl-color-gray-100: hsl(240 4.8% 95.9%);
  --sl-color-gray-200: hsl(240 5.9% 90%);
  --sl-color-gray-300: hsl(240 4.9% 83.9%);
  --sl-color-gray-400: hsl(240 5% 64.9%);
  --sl-color-gray-500: hsl(240 3.8% 46.1%);
  --sl-color-gray-600: hsl(240 5.2% 33.9%);
  --sl-color-gray-700: hsl(240 5.3% 26.1%);
  --sl-color-gray-800: hsl(240 3.7% 15.9%);
  --sl-color-gray-900: hsl(240 5.9% 10%);
  --sl-color-gray-950: hsl(240 7.3% 8%);
  --sl-color-red-50: hsl(0 85.7% 97.3%);
  --sl-color-red-100: hsl(0 93.3% 94.1%);
  --sl-color-red-200: hsl(0 96.3% 89.4%);
  --sl-color-red-300: hsl(0 93.5% 81.8%);
  --sl-color-red-400: hsl(0 90.6% 70.8%);
  --sl-color-red-500: hsl(0 84.2% 60.2%);
  --sl-color-red-600: hsl(0 72.2% 50.6%);
  --sl-color-red-700: hsl(0 73.7% 41.8%);
  --sl-color-red-800: hsl(0 70% 35.3%);
  --sl-color-red-900: hsl(0 62.8% 30.6%);
  --sl-color-red-950: hsl(0 60% 19.6%);
  --sl-color-orange-50: hsl(33.3 100% 96.5%);
  --sl-color-orange-100: hsl(34.3 100% 91.8%);
  --sl-color-orange-200: hsl(32.1 97.7% 83.1%);
  --sl-color-orange-300: hsl(30.7 97.2% 72.4%);
  --sl-color-orange-400: hsl(27 96% 61%);
  --sl-color-orange-500: hsl(24.6 95% 53.1%);
  --sl-color-orange-600: hsl(20.5 90.2% 48.2%);
  --sl-color-orange-700: hsl(17.5 88.3% 40.4%);
  --sl-color-orange-800: hsl(15 79.1% 33.7%);
  --sl-color-orange-900: hsl(15.3 74.6% 27.8%);
  --sl-color-orange-950: hsl(15.2 69.1% 19%);
  --sl-color-amber-50: hsl(48 100% 96.1%);
  --sl-color-amber-100: hsl(48 96.5% 88.8%);
  --sl-color-amber-200: hsl(48 96.6% 76.7%);
  --sl-color-amber-300: hsl(45.9 96.7% 64.5%);
  --sl-color-amber-400: hsl(43.3 96.4% 56.3%);
  --sl-color-amber-500: hsl(37.7 92.1% 50.2%);
  --sl-color-amber-600: hsl(32.1 94.6% 43.7%);
  --sl-color-amber-700: hsl(26 90.5% 37.1%);
  --sl-color-amber-800: hsl(22.7 82.5% 31.4%);
  --sl-color-amber-900: hsl(21.7 77.8% 26.5%);
  --sl-color-amber-950: hsl(22.9 74.1% 16.7%);
  --sl-color-yellow-50: hsl(54.5 91.7% 95.3%);
  --sl-color-yellow-100: hsl(54.9 96.7% 88%);
  --sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
  --sl-color-yellow-300: hsl(50.4 97.8% 63.5%);
  --sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
  --sl-color-yellow-500: hsl(45.4 93.4% 47.5%);
  --sl-color-yellow-600: hsl(40.6 96.1% 40.4%);
  --sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
  --sl-color-yellow-800: hsl(31.8 81% 28.8%);
  --sl-color-yellow-900: hsl(28.4 72.5% 25.7%);
  --sl-color-yellow-950: hsl(33.1 69% 13.9%);
  --sl-color-lime-50: hsl(78.3 92% 95.1%);
  --sl-color-lime-100: hsl(79.6 89.1% 89.2%);
  --sl-color-lime-200: hsl(80.9 88.5% 79.6%);
  --sl-color-lime-300: hsl(82 84.5% 67.1%);
  --sl-color-lime-400: hsl(82.7 78% 55.5%);
  --sl-color-lime-500: hsl(83.7 80.5% 44.3%);
  --sl-color-lime-600: hsl(84.8 85.2% 34.5%);
  --sl-color-lime-700: hsl(85.9 78.4% 27.3%);
  --sl-color-lime-800: hsl(86.3 69% 22.7%);
  --sl-color-lime-900: hsl(87.6 61.2% 20.2%);
  --sl-color-lime-950: hsl(86.5 60.6% 13.9%);
  --sl-color-green-50: hsl(138.5 76.5% 96.7%);
  --sl-color-green-100: hsl(140.6 84.2% 92.5%);
  --sl-color-green-200: hsl(141 78.9% 85.1%);
  --sl-color-green-300: hsl(141.7 76.6% 73.1%);
  --sl-color-green-400: hsl(141.9 69.2% 58%);
  --sl-color-green-500: hsl(142.1 70.6% 45.3%);
  --sl-color-green-600: hsl(142.1 76.2% 36.3%);
  --sl-color-green-700: hsl(142.4 71.8% 29.2%);
  --sl-color-green-800: hsl(142.8 64.2% 24.1%);
  --sl-color-green-900: hsl(143.8 61.2% 20.2%);
  --sl-color-green-950: hsl(144.3 60.7% 12%);
  --sl-color-emerald-50: hsl(151.8 81% 95.9%);
  --sl-color-emerald-100: hsl(149.3 80.4% 90%);
  --sl-color-emerald-200: hsl(152.4 76% 80.4%);
  --sl-color-emerald-300: hsl(156.2 71.6% 66.9%);
  --sl-color-emerald-400: hsl(158.1 64.4% 51.6%);
  --sl-color-emerald-500: hsl(160.1 84.1% 39.4%);
  --sl-color-emerald-600: hsl(161.4 93.5% 30.4%);
  --sl-color-emerald-700: hsl(162.9 93.5% 24.3%);
  --sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
  --sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
  --sl-color-emerald-950: hsl(164.3 87.5% 9.4%);
  --sl-color-teal-50: hsl(166.2 76.5% 96.7%);
  --sl-color-teal-100: hsl(167.2 85.5% 89.2%);
  --sl-color-teal-200: hsl(168.4 83.8% 78.2%);
  --sl-color-teal-300: hsl(170.6 76.9% 64.3%);
  --sl-color-teal-400: hsl(172.5 66% 50.4%);
  --sl-color-teal-500: hsl(173.4 80.4% 40%);
  --sl-color-teal-600: hsl(174.7 83.9% 31.6%);
  --sl-color-teal-700: hsl(175.3 77.4% 26.1%);
  --sl-color-teal-800: hsl(176.1 69.4% 21.8%);
  --sl-color-teal-900: hsl(175.9 60.8% 19%);
  --sl-color-teal-950: hsl(176.5 58.6% 11.4%);
  --sl-color-cyan-50: hsl(183.2 100% 96.3%);
  --sl-color-cyan-100: hsl(185.1 95.9% 90.4%);
  --sl-color-cyan-200: hsl(186.2 93.5% 81.8%);
  --sl-color-cyan-300: hsl(187 92.4% 69%);
  --sl-color-cyan-400: hsl(187.9 85.7% 53.3%);
  --sl-color-cyan-500: hsl(188.7 94.5% 42.7%);
  --sl-color-cyan-600: hsl(191.6 91.4% 36.5%);
  --sl-color-cyan-700: hsl(192.9 82.3% 31%);
  --sl-color-cyan-800: hsl(194.4 69.6% 27.1%);
  --sl-color-cyan-900: hsl(196.4 63.6% 23.7%);
  --sl-color-cyan-950: hsl(196.8 61% 16.1%);
  --sl-color-sky-50: hsl(204 100% 97.1%);
  --sl-color-sky-100: hsl(204 93.8% 93.7%);
  --sl-color-sky-200: hsl(200.6 94.4% 86.1%);
  --sl-color-sky-300: hsl(199.4 95.5% 73.9%);
  --sl-color-sky-400: hsl(198.4 93.2% 59.6%);
  --sl-color-sky-500: hsl(198.6 88.7% 48.4%);
  --sl-color-sky-600: hsl(200.4 98% 39.4%);
  --sl-color-sky-700: hsl(201.3 96.3% 32.2%);
  --sl-color-sky-800: hsl(201 90% 27.5%);
  --sl-color-sky-900: hsl(202 80.3% 23.9%);
  --sl-color-sky-950: hsl(202.3 73.8% 16.5%);
  --sl-color-blue-50: hsl(213.8 100% 96.9%);
  --sl-color-blue-100: hsl(214.3 94.6% 92.7%);
  --sl-color-blue-200: hsl(213.3 96.9% 87.3%);
  --sl-color-blue-300: hsl(211.7 96.4% 78.4%);
  --sl-color-blue-400: hsl(213.1 93.9% 67.8%);
  --sl-color-blue-500: hsl(217.2 91.2% 59.8%);
  --sl-color-blue-600: hsl(221.2 83.2% 53.3%);
  --sl-color-blue-700: hsl(224.3 76.3% 48%);
  --sl-color-blue-800: hsl(225.9 70.7% 40.2%);
  --sl-color-blue-900: hsl(224.4 64.3% 32.9%);
  --sl-color-blue-950: hsl(226.2 55.3% 18.4%);
  --sl-color-indigo-50: hsl(225.9 100% 96.7%);
  --sl-color-indigo-100: hsl(226.5 100% 93.9%);
  --sl-color-indigo-200: hsl(228 96.5% 88.8%);
  --sl-color-indigo-300: hsl(229.7 93.5% 81.8%);
  --sl-color-indigo-400: hsl(234.5 89.5% 73.9%);
  --sl-color-indigo-500: hsl(238.7 83.5% 66.7%);
  --sl-color-indigo-600: hsl(243.4 75.4% 58.6%);
  --sl-color-indigo-700: hsl(244.5 57.9% 50.6%);
  --sl-color-indigo-800: hsl(243.7 54.5% 41.4%);
  --sl-color-indigo-900: hsl(242.2 47.4% 34.3%);
  --sl-color-indigo-950: hsl(243.5 43.6% 22.9%);
  --sl-color-violet-50: hsl(250 100% 97.6%);
  --sl-color-violet-100: hsl(251.4 91.3% 95.5%);
  --sl-color-violet-200: hsl(250.5 95.2% 91.8%);
  --sl-color-violet-300: hsl(252.5 94.7% 85.1%);
  --sl-color-violet-400: hsl(255.1 91.7% 76.3%);
  --sl-color-violet-500: hsl(258.3 89.5% 66.3%);
  --sl-color-violet-600: hsl(262.1 83.3% 57.8%);
  --sl-color-violet-700: hsl(263.4 70% 50.4%);
  --sl-color-violet-800: hsl(263.4 69.3% 42.2%);
  --sl-color-violet-900: hsl(263.5 67.4% 34.9%);
  --sl-color-violet-950: hsl(265.1 61.5% 21.4%);
  --sl-color-purple-50: hsl(270 100% 98%);
  --sl-color-purple-100: hsl(268.7 100% 95.5%);
  --sl-color-purple-200: hsl(268.6 100% 91.8%);
  --sl-color-purple-300: hsl(269.2 97.4% 85.1%);
  --sl-color-purple-400: hsl(270 95.2% 75.3%);
  --sl-color-purple-500: hsl(270.7 91% 65.1%);
  --sl-color-purple-600: hsl(271.5 81.3% 55.9%);
  --sl-color-purple-700: hsl(272.1 71.7% 47.1%);
  --sl-color-purple-800: hsl(272.9 67.2% 39.4%);
  --sl-color-purple-900: hsl(273.6 65.6% 32%);
  --sl-color-purple-950: hsl(276 59.5% 16.5%);
  --sl-color-fuchsia-50: hsl(289.1 100% 97.8%);
  --sl-color-fuchsia-100: hsl(287 100% 95.5%);
  --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);
  --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);
  --sl-color-fuchsia-400: hsl(292 91.4% 72.5%);
  --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);
  --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);
  --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);
  --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
  --sl-color-fuchsia-900: hsl(296.7 63.6% 28%);
  --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);
  --sl-color-pink-50: hsl(327.3 73.3% 97.1%);
  --sl-color-pink-100: hsl(325.7 77.8% 94.7%);
  --sl-color-pink-200: hsl(325.9 84.6% 89.8%);
  --sl-color-pink-300: hsl(327.4 87.1% 81.8%);
  --sl-color-pink-400: hsl(328.6 85.5% 70.2%);
  --sl-color-pink-500: hsl(330.4 81.2% 60.4%);
  --sl-color-pink-600: hsl(333.3 71.4% 50.6%);
  --sl-color-pink-700: hsl(335.1 77.6% 42%);
  --sl-color-pink-800: hsl(335.8 74.4% 35.3%);
  --sl-color-pink-900: hsl(335.9 69% 30.4%);
  --sl-color-pink-950: hsl(336.2 65.4% 15.9%);
  --sl-color-rose-50: hsl(355.7 100% 97.3%);
  --sl-color-rose-100: hsl(355.6 100% 94.7%);
  --sl-color-rose-200: hsl(352.7 96.1% 90%);
  --sl-color-rose-300: hsl(352.6 95.7% 81.8%);
  --sl-color-rose-400: hsl(351.3 94.5% 71.4%);
  --sl-color-rose-500: hsl(349.7 89.2% 60.2%);
  --sl-color-rose-600: hsl(346.8 77.2% 49.8%);
  --sl-color-rose-700: hsl(345.3 82.7% 40.8%);
  --sl-color-rose-800: hsl(343.4 79.7% 34.7%);
  --sl-color-rose-900: hsl(341.5 75.5% 30.4%);
  --sl-color-rose-950: hsl(341.3 70.1% 17.1%);
  --sl-color-primary-50: var(--sl-color-sky-50);
  --sl-color-primary-100: var(--sl-color-sky-100);
  --sl-color-primary-200: var(--sl-color-sky-200);
  --sl-color-primary-300: var(--sl-color-sky-300);
  --sl-color-primary-400: var(--sl-color-sky-400);
  --sl-color-primary-500: var(--sl-color-sky-500);
  --sl-color-primary-600: var(--sl-color-sky-600);
  --sl-color-primary-700: var(--sl-color-sky-700);
  --sl-color-primary-800: var(--sl-color-sky-800);
  --sl-color-primary-900: var(--sl-color-sky-900);
  --sl-color-primary-950: var(--sl-color-sky-950);
  --sl-color-success-50: var(--sl-color-green-50);
  --sl-color-success-100: var(--sl-color-green-100);
  --sl-color-success-200: var(--sl-color-green-200);
  --sl-color-success-300: var(--sl-color-green-300);
  --sl-color-success-400: var(--sl-color-green-400);
  --sl-color-success-500: var(--sl-color-green-500);
  --sl-color-success-600: var(--sl-color-green-600);
  --sl-color-success-700: var(--sl-color-green-700);
  --sl-color-success-800: var(--sl-color-green-800);
  --sl-color-success-900: var(--sl-color-green-900);
  --sl-color-success-950: var(--sl-color-green-950);
  --sl-color-warning-50: var(--sl-color-amber-50);
  --sl-color-warning-100: var(--sl-color-amber-100);
  --sl-color-warning-200: var(--sl-color-amber-200);
  --sl-color-warning-300: var(--sl-color-amber-300);
  --sl-color-warning-400: var(--sl-color-amber-400);
  --sl-color-warning-500: var(--sl-color-amber-500);
  --sl-color-warning-600: var(--sl-color-amber-600);
  --sl-color-warning-700: var(--sl-color-amber-700);
  --sl-color-warning-800: var(--sl-color-amber-800);
  --sl-color-warning-900: var(--sl-color-amber-900);
  --sl-color-warning-950: var(--sl-color-amber-950);
  --sl-color-danger-50: var(--sl-color-red-50);
  --sl-color-danger-100: var(--sl-color-red-100);
  --sl-color-danger-200: var(--sl-color-red-200);
  --sl-color-danger-300: var(--sl-color-red-300);
  --sl-color-danger-400: var(--sl-color-red-400);
  --sl-color-danger-500: var(--sl-color-red-500);
  --sl-color-danger-600: var(--sl-color-red-600);
  --sl-color-danger-700: var(--sl-color-red-700);
  --sl-color-danger-800: var(--sl-color-red-800);
  --sl-color-danger-900: var(--sl-color-red-900);
  --sl-color-danger-950: var(--sl-color-red-950);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-0: hsl(0, 0%, 100%);
  --sl-color-neutral-1000: hsl(0, 0%, 0%);
  --sl-border-radius-small: 0.1875rem;
  --sl-border-radius-medium: 0.25rem;
  --sl-border-radius-large: 0.5rem;
  --sl-border-radius-x-large: 1rem;
  --sl-border-radius-circle: 50%;
  --sl-border-radius-pill: 9999px;
  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
  --sl-spacing-3x-small: 0.125rem;
  --sl-spacing-2x-small: 0.25rem;
  --sl-spacing-x-small: 0.5rem;
  --sl-spacing-small: 0.75rem;
  --sl-spacing-medium: 1rem;
  --sl-spacing-large: 1.25rem;
  --sl-spacing-x-large: 1.75rem;
  --sl-spacing-2x-large: 2.25rem;
  --sl-spacing-3x-large: 3rem;
  --sl-spacing-4x-large: 4.5rem;
  --sl-transition-x-slow: 1000ms;
  --sl-transition-slow: 500ms;
  --sl-transition-medium: 250ms;
  --sl-transition-fast: 150ms;
  --sl-transition-x-fast: 50ms;
  --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --sl-font-serif: Georgia, "Times New Roman", serif;
  --sl-font-size-2x-small: 0.625rem;
  --sl-font-size-x-small: 0.75rem;
  --sl-font-size-small: 0.875rem;
  --sl-font-size-medium: 1rem;
  --sl-font-size-large: 1.25rem;
  --sl-font-size-x-large: 1.5rem;
  --sl-font-size-2x-large: 2.25rem;
  --sl-font-size-3x-large: 3rem;
  --sl-font-size-4x-large: 4.5rem;
  --sl-font-weight-light: 300;
  --sl-font-weight-normal: 400;
  --sl-font-weight-semibold: 500;
  --sl-font-weight-bold: 700;
  --sl-letter-spacing-denser: -0.03em;
  --sl-letter-spacing-dense: -0.015em;
  --sl-letter-spacing-normal: normal;
  --sl-letter-spacing-loose: 0.075em;
  --sl-letter-spacing-looser: 0.15em;
  --sl-line-height-denser: 1;
  --sl-line-height-dense: 1.4;
  --sl-line-height-normal: 1.8;
  --sl-line-height-loose: 2.2;
  --sl-line-height-looser: 2.6;
  --sl-focus-ring-color: var(--sl-color-primary-600);
  --sl-focus-ring-style: solid;
  --sl-focus-ring-width: 3px;
  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
    var(--sl-focus-ring-color);
  --sl-focus-ring-offset: 1px;
  --sl-button-font-size-small: var(--sl-font-size-x-small);
  --sl-button-font-size-medium: var(--sl-font-size-small);
  --sl-button-font-size-large: var(--sl-font-size-medium);
  --sl-input-height-small: 1.875rem;
  --sl-input-height-medium: 2.5rem;
  --sl-input-height-large: 3.125rem;
  --sl-input-background-color: var(--sl-color-neutral-0);
  --sl-input-background-color-hover: var(--sl-input-background-color);
  --sl-input-background-color-focus: var(--sl-input-background-color);
  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-border-color: var(--sl-color-neutral-300);
  --sl-input-border-color-hover: var(--sl-color-neutral-400);
  --sl-input-border-color-focus: var(--sl-color-primary-500);
  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
  --sl-input-border-width: 1px;
  --sl-input-required-content: "*";
  --sl-input-required-content-offset: -2px;
  --sl-input-required-content-color: var(--sl-input-label-color);
  --sl-input-border-radius-small: var(--sl-border-radius-medium);
  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
  --sl-input-border-radius-large: var(--sl-border-radius-medium);
  --sl-input-font-family: var(--sl-font-sans);
  --sl-input-font-weight: var(--sl-font-weight-normal);
  --sl-input-font-size-small: var(--sl-font-size-small);
  --sl-input-font-size-medium: var(--sl-font-size-medium);
  --sl-input-font-size-large: var(--sl-font-size-large);
  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
  --sl-input-color: var(--sl-color-neutral-700);
  --sl-input-color-hover: var(--sl-color-neutral-700);
  --sl-input-color-focus: var(--sl-color-neutral-700);
  --sl-input-color-disabled: var(--sl-color-neutral-900);
  --sl-input-icon-color: var(--sl-color-neutral-500);
  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
  --sl-input-placeholder-color: var(--sl-color-neutral-500);
  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
  --sl-input-spacing-small: var(--sl-spacing-small);
  --sl-input-spacing-medium: var(--sl-spacing-medium);
  --sl-input-spacing-large: var(--sl-spacing-large);
  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
  --sl-input-focus-ring-offset: 0;
  --sl-input-filled-background-color: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-filled-color: var(--sl-color-neutral-800);
  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
  --sl-input-label-font-size-small: var(--sl-font-size-small);
  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
  --sl-input-label-font-size-large: var(--sl-font-size-large);
  --sl-input-label-color: inherit;
  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
  --sl-input-help-text-color: var(--sl-color-neutral-500);
  --sl-toggle-size-small: 0.875rem;
  --sl-toggle-size-medium: 1.125rem;
  --sl-toggle-size-large: 1.375rem;
  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
  --sl-panel-background-color: var(--sl-color-neutral-0);
  --sl-panel-border-color: var(--sl-color-neutral-200);
  --sl-panel-border-width: 1px;
  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
  --sl-tooltip-background-color: var(--sl-color-neutral-800);
  --sl-tooltip-color: var(--sl-color-neutral-0);
  --sl-tooltip-font-family: var(--sl-font-sans);
  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
  --sl-tooltip-font-size: var(--sl-font-size-small);
  --sl-tooltip-line-height: var(--sl-line-height-dense);
  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
  --sl-tooltip-arrow-size: 6px;
  --sl-z-index-drawer: 700;
  --sl-z-index-dialog: 800;
  --sl-z-index-dropdown: 900;
  --sl-z-index-toast: 950;
  --sl-z-index-tooltip: 1000;
}

@supports (scrollbar-gutter: stable) {
  .sl-scroll-lock {
    scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
  }
  .sl-scroll-lock body {
    overflow: hidden !important;
  }
}
@supports not (scrollbar-gutter: stable) {
  .sl-scroll-lock body {
    padding-right: var(--sl-scroll-lock-size) !important;
    overflow: hidden !important;
  }
}
.sl-toast-stack {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: var(--sl-z-index-toast);
  width: 28rem;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.sl-toast-stack sl-alert {
  margin: var(--sl-spacing-medium);
}

.sl-toast-stack sl-alert::part(base) {
  box-shadow: var(--sl-shadow-large);
}

h1 {
  font-size: var(--op-font-4x-large);
  font-weight: var(--op-font-weight-bold);
}

h2 {
  font-size: var(--op-font-3x-large);
  font-weight: var(--op-font-weight-bold);
}

h3 {
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-semi-bold);
}

h4 {
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-semi-bold);
}

h5 {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-semi-bold);
}

h6 {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
}

p {
  margin-bottom: var(--op-space-small);
  font-size: var(--op-font-medium);
}

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

.app-with-sidebar {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.app-body {
  flex-grow: 1;
  min-width: calc(100vw - var(--op-space-scale-unit) * 21.6);
}

.app__content {
  box-sizing: border-box;
  overflow-y: auto;
  max-width: initial;
  margin: initial;
  padding: initial;
}

.app__content-area {
  max-width: initial;
  height: 100%;
}

.app__content--wide {
  max-width: calc(var(--op-space-scale-unit) * 240);
}

.horizontal-collection {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--op-space-medium);
}

.body__content {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  height: 100%;
}

.body__content--padded {
  padding-inline: var(--op-space-x-large);
  padding-block: var(--op-space-medium) var(--op-space-x-large);
}

:root {
  --op-icon-input-search: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path fill="%236C7C9D" d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z"/></svg>');
  --op-icon-search-cancel: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path fill="%230077CC" d="m16.5 33.6 7.5-7.5 7.5 7.5 2.1-2.1-7.5-7.5 7.5-7.5-2.1-2.1-7.5 7.5-7.5-7.5-2.1 2.1 7.5 7.5-7.5 7.5ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Z"/></svg>');
  --op-form-dropdown-arrow: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z"/></svg>');
}

:root {
  --op-color-primary-plus-eight: hsl(var(--op-color-primary-h), 83%, 98%);
  --op-color-primary-plus-seven: hsl(var(--op-color-primary-h), 91%, 96%);
  --op-color-primary-plus-six: hsl(var(--op-color-primary-h), 94%, 94%);
  --op-color-primary-plus-five: hsl(var(--op-color-primary-h), 96%, 90%);
  --op-color-primary-plus-four: hsl(var(--op-color-primary-h), 98%, 84%);
  --op-color-primary-plus-three: hsl(var(--op-color-primary-h), 99%, 70%);
  --op-color-primary-plus-two: hsl(var(--op-color-primary-h), 99%, 62%);
  --op-color-primary-plus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 48%);
  --op-color-primary-base: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 42%);
  --op-color-primary-minus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 35%);
  --op-color-primary-minus-two: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 30%);
  --op-color-primary-minus-three: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 26%);
  --op-color-primary-minus-four: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 22%);
  --op-color-primary-minus-five: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 16%);
  --op-color-primary-minus-six: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 12%);
  --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 40%);
  --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 39%);
  --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 38%);
  --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 37%);
  --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 35%);
  --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 32%);
  --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 25%);
  --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 21%);
  --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 13%);
  --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-base: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 5%);
  --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h), 96%, 91%);
  --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h), 98%, 84%);
  --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h), 98%, 76%);
  --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h), 99%, 68%);
  --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h), 99%, 60%);
  --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h), 99%, 52%);
  --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 44%);
  --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 42%);
  --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 40%);
  --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-secondary-plus-max: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 100%);
  --op-color-secondary-plus-eight: hsl(var(--op-color-secondary-h), 33%, 98%);
  --op-color-secondary-plus-seven: hsl(var(--op-color-secondary-h), 36%, 96%);
  --op-color-secondary-plus-six: hsl(var(--op-color-secondary-h), 39%, 94%);
  --op-color-secondary-plus-five: hsl(var(--op-color-secondary-h), 40%, 90%);
  --op-color-secondary-plus-four: hsl(var(--op-color-secondary-h), 40%, 84%);
  --op-color-secondary-plus-three: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 70%);
  --op-color-secondary-plus-two: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 60%);
  --op-color-secondary-plus-one: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 47%);
  --op-color-secondary-base: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 40%);
  --op-color-secondary-minus-one: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 32%);
  --op-color-secondary-minus-two: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 28%);
  --op-color-secondary-minus-three: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 26%);
  --op-color-secondary-minus-four: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 22%);
  --op-color-secondary-minus-five: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 16%);
  --op-color-secondary-minus-six: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 12%);
  --op-color-secondary-minus-seven: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 8%);
  --op-color-secondary-minus-eight: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 4%);
  --op-color-secondary-minus-max: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 0%);
  --op-color-secondary-on-plus-max: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 52%);
  --op-color-secondary-on-plus-max-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-eight: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 51%);
  --op-color-secondary-on-plus-eight-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-seven: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 50%);
  --op-color-secondary-on-plus-seven-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-six: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 48%);
  --op-color-secondary-on-plus-six-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-five: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 45%);
  --op-color-secondary-on-plus-five-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-four: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 40%);
  --op-color-secondary-on-plus-four-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-three: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 27%);
  --op-color-secondary-on-plus-three-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-two: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 15%);
  --op-color-secondary-on-plus-two-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-one: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 92%);
  --op-color-secondary-on-plus-one-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-base: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 84%);
  --op-color-secondary-on-base-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-one: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 75%);
  --op-color-secondary-on-minus-one-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-two: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 71%);
  --op-color-secondary-on-minus-two-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-three: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 69%);
  --op-color-secondary-on-minus-three-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-four: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 65%);
  --op-color-secondary-on-minus-four-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-five: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 61%);
  --op-color-secondary-on-minus-five-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-six: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 60%);
  --op-color-secondary-on-minus-six-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-seven: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 55%);
  --op-color-secondary-on-minus-seven-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-eight: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 54%);
  --op-color-secondary-on-minus-eight-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-max: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 53%);
  --op-color-secondary-on-minus-max-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 46%);
  --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 26%);
  --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 22%);
  --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 16%);
  --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 12%);
  --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 40%);
  --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 20%);
  --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 38%);
  --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 37%);
  --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 46%);
  --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 43%);
  --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 38%);
  --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 27%);
  --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 22%);
  --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 94%);
  --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-base: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 86%);
  --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 81%);
  --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 76%);
  --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 71%);
  --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 66%);
  --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 62%);
  --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 59%);
  --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 53%);
  --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 51%);
  --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 50%);
  --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h), 67%, 98%);
  --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h), 74%, 96%);
  --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h), 81%, 94%);
  --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h), 81%, 90%);
  --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h), 81%, 86%);
  --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 80%);
  --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 72%);
  --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 62%);
  --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 55%);
  --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 40%);
  --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 22%);
  --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 16%);
  --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 12%);
  --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 50%);
  --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 48%);
  --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 46%);
  --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 44%);
  --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 41%);
  --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 30%);
  --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 22%);
  --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 10%);
  --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 14%);
  --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 8%);
  --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h), 81%, 90%);
  --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h), 82%, 81%);
  --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h), 82%, 76%);
  --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 72%);
  --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 68%);
  --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 63%);
  --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 55%);
  --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 51%);
  --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 50%);
  --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h), 83%, 98%);
  --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h), 91%, 96%);
  --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h), 94%, 94%);
  --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h), 96%, 90%);
  --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h), 98%, 84%);
  --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h), 98%, 78%);
  --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h), 99%, 70%);
  --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h), 99%, 62%);
  --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 48%);
  --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 40%);
  --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 36%);
  --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 28%);
  --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 16%);
  --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 12%);
  --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 26%);
  --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 26%);
  --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 26%);
  --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 25%);
  --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 25%);
  --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 24%);
  --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 23%);
  --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 22%);
  --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 22%);
  --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 15%);
  --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 12%);
  --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 12%);
  --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 4%);
  --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 54%);
  --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 44%);
  --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 41%);
  --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 31%);
  --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 28%);
  --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 27%);
  --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h), 83%, 98%);
  --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h), 91%, 96%);
  --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h), 94%, 94%);
  --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h), 96%, 90%);
  --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h), 98%, 84%);
  --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h), 99%, 70%);
  --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h), 99%, 68%);
  --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 60%);
  --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 32%);
  --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 28%);
  --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 26%);
  --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 22%);
  --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 16%);
  --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 12%);
  --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 40%);
  --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 39%);
  --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 38%);
  --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 37%);
  --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 35%);
  --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 32%);
  --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 25%);
  --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 22%);
  --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 12%);
  --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h), 98%, 84%);
  --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h), 98%, 76%);
  --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h), 99%, 72%);
  --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h), 99%, 64%);
  --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h), 99%, 56%);
  --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h), 99%, 52%);
  --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 44%);
  --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 42%);
  --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 40%);
  --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h), 83%, 98%);
  --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h), 91%, 96%);
  --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h), 88%, 94%);
  --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h), 92%, 90%);
  --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 86%);
  --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 70%);
  --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 60%);
  --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 46%);
  --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 40%);
  --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 32%);
  --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 28%);
  --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 22%);
  --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 16%);
  --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 12%);
  --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 8%);
  --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 4%);
  --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 30%);
  --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 30%);
  --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 30%);
  --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 29%);
  --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 28%);
  --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 26%);
  --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 24%);
  --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 23%);
  --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 20%);
  --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 13%);
  --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 12%);
  --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h), 100%, 4%);
  --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 88%);
  --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-background: var(--op-color-neutral-plus-eight);
  --op-color-on-background: var(--op-color-neutral-on-plus-eight-alt);
}

:root {
  --op-color-primary-h: 205;
  --op-color-primary-s: 100%;
  --op-color-primary-l: 35%;
  --op-color-secondary-h: 220;
  --op-color-secondary-s: 42%;
  --op-color-secondary-l: 50%;
  --op-color-neutral-h: 220;
  --op-color-neutral-s: 20%;
  --op-color-neutral-l: 40%;
  --op-color-alerts-danger-h: 0;
  --op-color-alerts-danger-s: 84%;
  --op-color-alerts-danger-l: 60%;
  --op-color-alerts-notice-h: 158;
  --op-color-alerts-notice-s: 100%;
  --op-color-alerts-notice-l: 35%;
  --op-color-alerts-info-h: 205;
  --op-color-alerts-info-s: 100%;
  --op-color-alerts-info-l: 35%;
  --op-color-alerts-warning-h: 43;
  --op-color-alerts-warning-s: 96%;
  --op-color-alerts-warning-l: 56%;
  --op-font-family: 'Manrope', Roboto, sans-serif;
  --fd-page-title: -0.01em;
  --fd-page-title-metrics: -0.04em;
  --fd-letter-spacing-caps: 0.06rem;
  --op-color-border: var(--op-color-neutral-plus-four);
  --op-border-input: inset 0px 1px 1px var(--op-color-neutral-plus-four);
  --op-inset-shadow-input: inset 0px 2px 1px rgba(0, 0, 0, 0.08);
  --op-border-width: 1px;
  --op-border-width-large: 2px;
  --op-border-width-x-large: 4px;
  --op-space-scale-unit: 1rem;
  --op-space-4x-small: calc(var(--op-space-scale-unit) * .1);
  --op-space-3x-small: calc(var(--op-space-scale-unit) * .2);
  --op-space-2x-small: calc(var(--op-space-scale-unit) * .4);
  --op-space-x-small: calc(var(--op-space-scale-unit) * .8);
  --op-space-small: calc(var(--op-space-scale-unit) * 1.2);
  --op-space-medium: calc(var(--op-space-scale-unit) * 1.6);
  --op-space-large: calc(var(--op-space-scale-unit) * 2);
  --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4);
  --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8);
  --op-space-3x-large: calc(var(--op-space-scale-unit) * 3.2);
  --op-space-4x-large: calc(var(--op-space-scale-unit) * 3.6);
  --op-space-5x-large: calc(var(--op-space-scale-unit) * 4);
  --op-space-6x-large: calc(var(--op-space-scale-unit) * 4.4);
  --op-space-7x-large: calc(var(--op-space-scale-unit) * 4.8);
  --op-space-8x-large: calc(var(--op-space-scale-unit) * 6.4);
  --op-space-9x-large: calc(var(--op-space-scale-unit) * 8);
  --fd-focus-style: inset var(--op-border-all) var(--op-color-primary-minus-three), 0 0 0 3px var(--op-color-primary-plus-four);
  --fd-focus-style-delete: inset var(--op-border-all) var(--op-color-alerts-danger-minus-three), 0 0 0 3px var(--op-color-alerts-danger-plus-four);
  --op-header-height: var(--op-space-8x-large);
  --op-table-min-height: 50rem;
  /* Input Heights */
  --op-input-height-medium: 3.2rem;
  --op-input-height-x-large: 4.4rem;
  --op-input-height-2x-large: 8.4rem;
  /* Opacities */
  --op-opacity-disabled: 0.44;
  /* Shadows */
  --op-shadow-x-small: 0px 1px 2px hsl(from var(--op-color-neutral-minus-max) h s l / 8%);
  --fd-shadow-sheet-up: 0 -8px 30px hsl(from hsl(220, 20%, 0%) h s l / 0.18);
  /* Scrims */
  --fd-alpha-scrim: 0.35;
  --fd-alpha-scrim-heavy: 0.55;
  --fd-alpha-veil: 0.75;
  --fd-alpha-surface: 0.88;
  /* Mobile */
  --fd-touch-target: 44px;
  --fd-drawer-max-height: 88%;
}

:root {
  --sl-font-sans: var(--op-font-family);
  --sl-color-primary-600: var(--op-color-primary-base);
  --sl-color-neutral-0: var(--op-color-neutral-plus-max);
  --sl-color-neutral-100: var(--op-color-neutral-plus-seven);
  --sl-color-neutral-200: var(--op-color-neutral-plus-four);
  --sl-color-neutral-500: var(--op-color-neutral-plus-one);
  --sl-color-neutral-600: var(--op-color-neutral-minus-one);
  --sl-color-neutral-700: var(--op-color-neutral-minus-three);
  --sl-color-neutral-1000: var(--op-color-neutral-minus-max);
  --sl-border-radius-medium: var(--op-radius-large);
  --sl-shadow-large: var(--op-shadow-large);
  --sl-shadow-x-large: var(--op-shadow-x-large);
}

:root {
  --flytedesk-logo-image: url("/assets/platform_ui/flytedesk_logo_light-5175f72b.svg");
  --flytedesk-icon-logo-image: url("/assets/platform_ui/flytedesk_icon_logo-b7c7303b.svg");
}

@keyframes slideIn {
  0% {
    right: -130%;
  }
  10% {
    right: 0;
  }
}
/* Animations */
@keyframes slideInOut {
  /* If a duration of 5s is set: */
  /* Start off the screen */
  0% {
    right: -130%;
  }
  /* Animate onto the screen for 0.5s */
  10% {
    right: 0;
  }
  /* Stay on the screen for 3s */
  70% {
    right: 0;
  }
  /* Animate off the screen for 1.5s */
  100% {
    right: -130%;
  }
}
/* Container for alerts in lower-right-hand corner of screen */
.alert-container {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--op-space-small);
  padding: var(--op-space-small);
}

.alert {
  /* Add a faint shadow to alerts */
  --fd-alert-shadow: 0px var(--op-border-width) var(--op-border-width-x-large) rgba(0, 0, 0, 0.08);
  --fd-transition-alert: 5s;
  position: relative;
  z-index: var(--op-z-index-alert-group);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-medium) var(--op-space-large);
  /* Modifiers */
  &.alert--notice {
    background-color: var(--op-color-alerts-notice-plus-five);
    color: var(--op-color-alerts-notice-on-plus-five);
    box-shadow: var(--op-border-all) var(--op-color-alerts-notice-plus-four), var(--fd-alert-shadow);
    .alert__title {
      color: inherit;
    }
  }
  &.alert--info {
    background-color: var(--op-color-alerts-info-plus-five);
    color: var(--op-color-alerts-info-on-plus-five);
    box-shadow: var(--op-border-all) var(--op-color-alerts-info-plus-four), var(--fd-alert-shadow);
    .alert__title {
      color: inherit;
    }
  }
  &.alert--warning {
    background-color: var(--op-color-alerts-warning-plus-five);
    color: var(--op-color-alerts-warning-on-plus-five);
    box-shadow: var(--op-border-all) var(--op-color-alerts-warning-plus-four), var(--fd-alert-shadow);
    .alert__title {
      color: inherit;
    }
  }
  &.alert--danger {
    background-color: var(--op-color-alerts-danger-plus-five);
    color: var(--op-color-alerts-danger-on-plus-five);
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-plus-four), var(--fd-alert-shadow);
    .alert__title {
      color: inherit;
    }
  }
  /* Alert moves off the screen after a short period of time */
  &.alert--temporary {
    animation: slideInOut var(--fd-transition-alert) normal forwards;
  }
  /* Alert stays on screen until user dismisses it */
  &.alert--hold {
    animation: slideIn var(--fd-transition-alert) normal forwards;
  }
  &.alert--sticky {
    position: sticky;
    top: 0;
    border-radius: 0;
  }
  .alert__icon {
    display: flex;
    align-items: center;
  }
  /* Alert text */
  .alert__title {
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-bold);
  }
}

.badge {
  line-height: var(--op-line-height-densest);
  font-weight: var(--op-font-weight-medium);
  letter-spacing: 0;
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
  &.badge--primary {
    background-color: var(--op-color-primary-minus-one);
    color: var(--op-color-primary-on-minus-one-alt);
    &.badge--alt {
      background-color: var(--op-color-primary-plus-four);
      color: var(--op-color-primary-on-plus-four);
    }
  }
  &.badge--warning {
    background-color: var(--op-color-alerts-warning-plus-one);
    color: var(--op-color-alerts-warning-on-plus-one);
    &.badge--alt {
      background-color: var(--op-color-alerts-warning-plus-four);
      color: var(--op-color-alerts-warning-on-plus-four);
    }
  }
  &.badge--notice {
    background-color: var(--op-color-alerts-notice-minus-two);
    color: var(--op-color-primary-on-minus-one-alt);
    &.badge--alt {
      background-color: var(--op-color-alerts-notice-plus-five);
      color: var(--op-color-alerts-notice-on-plus-five);
    }
  }
  &.badge--danger {
    background-color: var(--op-color-alerts-danger-minus-one);
    color: var(--op-color-alerts-danger-on-minus-one-alt);
    &.badge--alt {
      background-color: var(--op-color-alerts-danger-plus-five);
      color: var(--op-color-alerts-danger-on-plus-five);
    }
  }
  &.badge--alt {
    background-color: var(--op-color-neutral-plus-six);
    color: var(--op-color-neutral-on-plus-six);
  }
  &.badge--count {
    padding-inline: var(--op-space-2x-small);
    min-inline-size: calc(1lh + 2 * var(--op-space-2x-small));
    &[data-value="0"] {
      background-color: var(--op-color-neutral-plus-four);
      color: var(--op-color-neutral-on-plus-four);
    }
  }
  &.badge--small {
    font-size: var(--op-font-2x-small);
    gap: var(--op-space-2x-small);
  }
  /* Project-specific modifier */
  &.badge--wrappable {
    text-wrap: auto;
    line-height: var(--op-line-height-dense);
    &.badge--pill {
      border-radius: var(--op-radius-x-large); /* Ensure wrapped badges maintain pill shape without clipping corners */
    }
  }
}

/* ====================== */
/* Button Theme Overrides */
/* ====================== */
.btn {
  --_op-btn-height-small: var(--op-input-height-medium);
  --_op-btn-height-medium: var(--op-input-height-large);
  --_op-btn-height-large: var(--op-input-height-x-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-medium);
  --_op-btn-padding-large: 0 var(--op-space-medium);
  /* Component Defaults */
  --__op-btn-font-size: var(--_op-btn-font-medium);
  --__op-btn-height: var(--_op-btn-height-medium);
  background-color: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-border-all) var(--op-color-border), var(--op-shadow-x-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-weight: var(--op-font-weight-semi-bold);
  height: var(--__op-btn-height);
  padding: 0 var(--op-space-small);
  /* Default Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
    box-shadow: var(--fd-focus-style);
  }
  /* Default Hover State */
  &:hover {
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three), var(--op-shadow-x-small);
    color: var(--op-color-primary-on-plus-eight);
  }
  /* Default Borderless State */
  &.btn--no-border {
    color: var(--op-color-primary-on-plus-max-alt);
    /* Default Borderless + Hover State */
    &:hover {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: var(--op-border-all) var(--op-color-primary-plus-three), var(--op-shadow-x-small);
      color: var(--op-color-primary-on-plus-eight);
    }
  }
  /* Link State: no padding, size, background or border */
  /* The text colors intentionally copy btn--no-border's -on- colors, though there is no background behind them */
  &.btn--link {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-primary-on-plus-max-alt);
    height: auto;
    min-block-size: auto;
    inline-size: auto;
    min-inline-size: auto;
    padding: 0;
    /* Link + Active State */
    &.btn--active {
      background-color: transparent;
      box-shadow: none;
      color: var(--op-color-primary-on-plus-five);
    }
    /* Link + Hover State */
    &:hover {
      background-color: transparent;
      box-shadow: none;
      color: var(--op-color-primary-on-plus-eight);
    }
    /* Link + Focus State */
    &:focus-visible {
      background-color: transparent;
      box-shadow: var(--fd-focus-style);
      color: var(--op-color-primary-on-plus-eight);
    }
  }
  /* Small button */
  &.btn--small {
    font-weight: var(--op-font-weight-bold);
  }
  /* Large button */
  &.btn--large {
    font-weight: var(--op-font-weight-bold);
  }
  /* Variant Modifiers */
  /* Primary Button */
  &.btn--primary {
    background-color: var(--op-color-primary-minus-one);
    box-shadow: var(--op-shadow-x-small);
    color: var(--op-color-primary-on-minus-one-alt);
    /* Hover State */
    &:hover {
      background-color: var(--op-color-primary-minus-three);
      color: var(--op-color-primary-on-minus-three-alt);
      box-shadow: var(--op-shadow-x-small);
    }
    /* Focus State */
    &:focus,
    &:focus-within,
    &:focus-visible {
      box-shadow: var(--fd-focus-style);
      background-color: var(--op-color-primary-minus-one);
      color: var(--op-color-primary-on-minus-one-alt);
    }
    /* Primary Borderless State */
    &.btn--no-border {
      /* Primary Borderless + Hover State */
      &:hover {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three), var(--op-shadow-x-small);
        color: var(--op-color-primary-on-plus-eight);
      }
    }
  }
  /* Delete Button */
  &.btn--destructive {
    background-color: var(--op-color-alerts-danger-minus-one);
    box-shadow: var(--op-shadow-x-small);
    color: var(--op-color-alerts-danger-on-minus-one-alt);
    /* Hover State */
    &:hover {
      background-color: var(--op-color-alerts-danger-minus-three);
      box-shadow: var(--op-shadow-x-small);
      color: var(--op-color-alerts-danger-on-minus-three-alt);
    }
    /* Focus State */
    &:focus,
    &:focus-within,
    &:focus-visible {
      background-color: var(--op-color-alerts-danger-minus-one);
      box-shadow: var(--fd-focus-style-delete);
      color: var(--op-color-alerts-danger-on-minus-one-alt);
    }
    /* Borderless State */
    &.btn--no-border {
      background-color: transparent;
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-plus-max);
      /* Borderless + Hover State */
      &:hover {
        background-color: var(--op-color-alerts-danger-plus-eight);
        box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three), var(--op-shadow-x-small);
        color: var(--op-color-alerts-danger-on-plus-eight);
      }
    }
  }
}

.icon {
  /* Optics sets display: inline-block, which beats the browser's [hidden] { display: none }. */
  &[hidden] {
    display: none;
  }
  --_op-icon-font-size-2x-small: calc(var(--op-space-scale-unit) * .8);
  --_op-icon-font-size-x-small: var(--op-font-x-small);
  --_op-icon-font-size-x-large: var(--op-font-x-large);
  --_op-icon-font-size-2x-large: var(--op-font-2x-large);
  --_op-icon-font-size-3x-large: var(--op-font-3x-large);
  --_op-icon-font-size-5x-large: var(--op-font-5x-large);
  /* Size Modifiers */
  &.icon--2x-small {
    --__op-icon-font-size: var(--_op-icon-font-size-2x-small);
  }
  &.icon--x-small {
    --__op-icon-font-size: var(--_op-icon-font-size-x-small);
    --__op-icon-optical-size: var(--_op-icon-optical-size-x-small);
  }
  &.icon--2x-large {
    --__op-icon-font-size: var(--_op-icon-font-size-2x-large);
  }
  &.icon--3x-large {
    --__op-icon-font-size: var(--_op-icon-font-size-3x-large);
  }
  &.icon--5x-large {
    --__op-icon-font-size: var(--_op-icon-font-size-5x-large);
  }
}

.dialog {
  --width: calc(var(--op-space-scale-unit) * 64);
  --body-spacing: 0;
}
.dialog::part(panel) {
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  overflow: hidden;
}
.dialog::part(header), .dialog::part(footer) {
  display: none;
}
.dialog::part(body) {
  display: flex;
  flex-direction: column;
}
.dialog.dialog--x-large {
  --width: calc(100vw - (var(--op-space-5x-large) * 2));
  --height: calc(100vh - (var(--op-space-5x-large) * 2));
}
.dialog.dialog--x-large::part(panel) {
  width: var(--width);
  height: var(--height);
}
.dialog.dialog--x-large .dialog__header {
  padding: var(--op-space-medium) var(--op-space-2x-large);
}
.dialog.dialog--x-large .dialog__header-title {
  font-size: var(--op-font-x-large);
}
.dialog.dialog--x-large .dialog__footer {
  padding: var(--op-space-small) var(--op-space-2x-large);
}
.dialog.dialog--progress:not(:has(sl-progress-bar[value="100"])) .dialog__footer {
  display: none;
}
.dialog .dialog__header-group {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-3x-small);
}

.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max-alt);
  padding: var(--op-space-small) var(--op-space-medium);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}

.dialog__body {
  background-color: var(--op-color-neutral-plus-eight);
  padding: var(--op-space-x-large);
  flex: 1;
  overflow: auto;
}
.dialog__body.dialog__body--no-padding {
  padding: 0;
}

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

.dialog__footer {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  padding: var(--op-space-small) var(--op-space-medium);
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.dialog__footer.dialog__footer--three-column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
}
.dialog__footer.dialog__footer--three-column .dialog__footer-navigation {
  display: flex;
  justify-content: center;
  grid-column: 2;
}
.dialog__footer.dialog__footer--three-column .dialog__footer-actions {
  justify-self: end;
  gap: var(--op-space-small);
  grid-column: 3;
}
.dialog__footer.dialog__footer--three-column .dialog__footer-label {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  justify-self: start;
}
.dialog__footer.dialog__footer--three-column .dialog__footer-label b {
  text-wrap: nowrap;
}

.dialog__header-title {
  margin: 0;
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-bold);
}

.dialog__header-subtitle {
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-medium);
  line-height: var(--op-line-height-denser);
}

.dialog__header-close {
  cursor: pointer;
}
.dialog__header-close a {
  color: var(--op-color-neutral-on-plus-max-alt);
  text-decoration: none;
}

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

.dialog--large {
  --width: calc(var(--op-space-scale-unit) * 84);
}
.dialog--large .dialog__header {
  padding: var(--op-space-x-large) var(--op-space-2x-large);
}

.dialog--confirm {
  padding: 0;
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-large);
  max-width: var(--width);
}
.dialog--confirm #confirm--deny-btn:has(> .hide) {
  display: none;
}

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.text-pair {
  --_op-text-pair-font-size-small: var(--op-font-x-small);
  --_op-text-pair-font-size-medium: var(--op-font-small);
  --_op-text-pair-font-size-x-large: var(--op-font-2x-large);
  gap: var(--op-space-2x-small);
  .text-pair__title {
    font-weight: var(--op-font-weight-medium);
    line-height: var(--op-line-height-denser);
    letter-spacing: var(--fd-page-title);
    &.text-pair__title--x-large {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-x-large);
    }
    &.text-pair__title--semibold {
      font-weight: var(--op-font-weight-semi-bold);
    }
    &.text-pair__title--truncated {
      display: block;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .text-pair__title-link {
    color: var(--op-color-neutral-on-plus-max-alt);
    text-decoration: none;
    transition: var(--op-transition-input);
  }
  .text-pair__subtitle {
    color: var(--op-color-neutral-on-plus-max);
    line-height: var(--op-line-height-denser);
    &.text-pair__subtitle--x-large {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-x-large);
    }
  }
  /* The metrics we display in OM page headers has slightly tweaked styling than the default text-pair */
  &.text-pair--metrics {
    text-align: right;
    gap: var(--op-space-x-small);
    .text-pair__title {
      line-height: var(--op-line-height-densest);
      font-weight: var(--op-font-weight-semi-bold);
      /* String of numerals needs tighter letter-spacing than string of normal letters */
      &.text-pair__title--x-large {
        letter-spacing: var(--fd-page-title-metrics);
      }
    }
    .text-pair__subtitle {
      line-height: var(--op-line-height-densest);
    }
  }
}

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

.tab {
  --_op-tab-padding-large: 0 var(--op-space-2x-small) var(--op-space-small);
  --_op-tab-indicator-width-large: 3px;
  --fd-tab-active-color: var(--op-color-primary-minus-one);
  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-base),
    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
  background-color: unset;
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-max);
  line-height: var(--op-line-height-densest);
}
.tab:hover {
  background-color: unset;
  box-shadow: var(--__op-tab-indicator) var(--fd-tab-active-color);
  color: var(--fd-tab-active-color);
}
.tab.tab--active, .tab.tab--active:hover {
  box-shadow: var(--__op-tab-indicator) var(--fd-tab-active-color);
  color: var(--fd-tab-active-color);
  font-weight: var(--op-font-weight-medium);
}

.avatar {
  --_op-avatar-size-small: calc(6 * var(--op-size-unit));
  --_op-avatar-size-medium: calc(20 * var(--op-size-unit));
  --_op-avatar-size-large: calc(37 * var(--op-size-unit));
  --_op-avatar-inner-border-width: 0;
  --_op-avatar-outer-border-width: var(--op-border-width);
  --_op-avatar-outer-border-color: var(--op-color-neutral-plus-four);
  &::before,
  &::after {
    pointer-events: none;
  }
  &.avatar--on-dark {
    --_op-avatar-outer-border-width: var(--op-border-width-large);
    --_op-avatar-outer-border-color: var(--op-color-neutral-plus-max);
  }
  /* Text (initials) fallback — Optics only styles the image case, so center and
     color the bare span the component renders when `text:` is given. */
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    inline-size: 100%;
    background-color: var(--_op-avatar-text-bg, var(--op-color-neutral-plus-four));
    color: var(--_op-avatar-text-color, var(--op-color-neutral-on-plus-four));
    /* Scale initials with the avatar diameter (~40% fits two letters). */
    font-size: calc(var(--__op-avatar-size) * .4);
    font-weight: var(--op-font-weight-semi-bold);
    line-height: 1;
    text-transform: uppercase;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  /* On a dark surface (e.g. the app bar): translucent white fill + white initials.
     The white ring comes from avatar--on-dark above. */
  &.avatar--on-dark span {
    --_op-avatar-text-bg: color-mix(in srgb, var(--op-color-neutral-plus-max) 16%, transparent);
    --_op-avatar-text-color: var(--op-color-neutral-plus-max);
  }
}

.back-link {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  font-weight: var(--op-font-weight-medium);
  line-height: var(--op-line-height-densest);
  font-size: var(--op-font-x-small);
  text-decoration: none;
  color: var(--op-color-primary-on-plus-max);
}

.card {
  --op-color-border: var(--op-color-neutral-plus-six);
  --_op-card-padding: var(--op-space-small) var(--op-space-medium);
  --fd-card-header-height: calc(var(--op-space-scale-unit) * 4.8); /* 48px */
  --_op-card-radius: var(--op-radius-large);
  box-shadow: none;
  border: var(--op-border-width) solid var(--op-color-border);
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-small);
}
.card .card__header + .card__body,
.card .card__body + .card__footer {
  border-top: var(--op-border-width) solid var(--op-color-border);
}
.card .card__header {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  justify-content: space-between;
  height: var(--fd-card-header-height);
  font-weight: var(--op-font-weight-semi-bold);
  line-height: var(--op-line-height-densest);
}
.card .card__header .header__start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--op-space-x-small);
}
.card .card__header .header__subtitle {
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.card .card__header .header__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--op-space-x-small);
}
.card .card__body .body__hint {
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.card.card__body--table .card__body {
  padding: unset;
}
.card.card__body--table .table thead tr th {
  border-radius: 0;
}
.card.card--organization {
  display: flex;
  flex-direction: column;
}
.card.card--organization .card__header {
  padding: unset;
  height: calc(var(--op-space-scale-unit) * 3.2);
}
.card.card--organization .card__subtitle {
  padding-bottom: var(--op-space-medium);
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.card.card--organization .card__body {
  display: flex;
  flex-direction: column;
  align-items: start;
  background-color: var(--op-color-neutral-plus-seven);
  border-radius: var(--op-radius-large);
  color: var(--op-color-neutral-on-plus-seven-alt);
  padding: var(--op-space-small);
}
.card .card__footer {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--op-space-2x-small);
}
.card .card__footer.card__footer--space-between {
  justify-content: space-between;
}

.copy-button {
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  line-height: 1;
  cursor: pointer;
}

.list-card-group {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  container-type: inline-size;
  container-name: listCardContainer;
}
.list-card-group.list-card-group--default-padding {
  padding: var(--op-space-x-large);
}

.list-card-group__empty-list {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
  padding: var(--op-space-2x-large);
  border-radius: var(--op-radius-large);
  text-align: center;
}

.list-card {
  --op-color-border: var(--op-color-neutral-plus-six);
  font-size: var(--op-font-small);
  contain: initial;
  transition: var(--op-transition-input);
  border-radius: var(--op-radius-large);
  box-shadow: 0 0 0 var(--op-border-width) var(--op-color-neutral-plus-four);
  background-color: var(--op-color-primary-plus-max);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding: var(--op-space-x-small);
}
.list-card .list-card__title {
  display: block;
  width: 100%;
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  text-decoration: none;
  transition: var(--op-transition-input);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-card .list-card__date {
  white-space: nowrap;
}
.list-card .list-card__budget,
.list-card .list-card__added-value {
  text-align: right;
}
.list-card .list-card__more-menu {
  text-align: right;
}
.list-card .list-card__more-menu sl-dropdown::part(trigger) {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: var(--op-space-2x-small);
  min-width: 36px;
  opacity: var(--op-opacity-none);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.list-card:hover {
  box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-base), var(--op-shadow-medium);
}
.list-card:hover .list-card__more-menu sl-dropdown::part(trigger) {
  opacity: var(--op-opacity-full);
  pointer-events: initial;
  -webkit-user-select: initial;
     -moz-user-select: initial;
          user-select: initial;
}
.list-card .list-card__body {
  --_card-column-width--large: calc(var(--op-space-scale-unit) * 13);
  --_card-column-width--medium: calc(var(--op-space-scale-unit) * 12);
  --_card-column-width--small: calc(var(--op-space-scale-unit) * 8);
  --_card-column-width--x-small: calc(var(--op-space-scale-unit) * 4);
  --_card-column-width--2x-small: var(--op-space-scale-unit);
  display: grid;
  gap: var(--op-space-3x-large);
  border-radius: var(--op-radius-large);
  align-items: center;
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max-alt);
  padding: var(--op-space-x-small);
}
.list-card .list-card__body:not(:last-child) {
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
}
.list-card .list-card__body:hover .list-card__title {
  color: var(--op-color-primary-base);
}
.list-card .list-card__body .button_to {
  display: grid;
}
.list-card .list-card__body .button_to button {
  display: flex;
  gap: var(--op-space-x-small);
}
.list-card .list-card__body .hidden-column {
  opacity: 0;
  pointer-events: none;
}

sl-details {
  width: 100%;
}
sl-details .details__toggle-icon {
  margin-left: auto;
  transition: transform 0.5s;
}
sl-details[open] .details__toggle-icon {
  transform: rotate(90deg);
}
sl-details::part(base) {
  border: none;
  color: var(--op-color-neutral-on-plus-max);
  font-family: var(--op-font-family);
  font-size: 14px;
  font-weight: var(--op-font-weight-bold);
}
sl-details::part(header) {
  padding: 0;
}
sl-details::part(summary) {
  min-width: 0;
}
sl-details::part(summary-icon) {
  display: none;
}
sl-details::part(content) {
  padding: var(--op-border-width);
  padding-left: var(--op-space-x-large);
}

.drawer {
  --size: calc(var(--op-space-scale-unit) * 51.2);
  --header-spacing: var(--op-space-small) var(--op-space-medium);
  --body-spacing: 0;
  --footer-spacing: var(--op-space-small) var(--op-space-medium);
}
.drawer::part(header) {
  color: var(--op-color-neutral-on-plus-max-alt);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.drawer::part(title) {
  font-size: var(--op-font-x-large);
  font-weight: var(--op-font-weight-bold);
  line-height: var(--op-line-height-denser);
  letter-spacing: var(--fd-page-title);
}
.drawer::part(header-actions) {
  align-self: auto;
  padding: var(--header-spacing);
  padding-left: 0;
}
.drawer::part(close-button) {
  display: none;
}
.drawer::part(body) {
  background-color: var(--op-color-neutral-plus-eight);
}
.drawer::part(panel) {
  overflow-y: hidden;
}
.drawer::part(footer) {
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.drawer:has([data-dirty]:not([data-dirty=false])) {
  --_fd-drawer-tabs-pointer-events: none;
  --_fd-drawer-tabs-opacity: var(--op-opacity-disabled);
  --_fd-pagination-link-pointer-events: none;
  --_fd-pagination-link-opacity: var(--op-opacity-disabled);
}
.drawer:has([data-dirty]:not([data-dirty=false])) sl-tab, .drawer:has([data-dirty]:not([data-dirty=false])) sl-dropdown, .drawer:has([data-dirty]:not([data-dirty=false])) .dialog__header-close, .drawer:has([data-dirty]:not([data-dirty=false])) .form-card__edit-button {
  pointer-events: none;
  opacity: var(--op-opacity-disabled);
}
.drawer:has([data-dirty]:not([data-dirty=false])) .drawer__save-indicator {
  display: none;
}

.drawer--wide {
  --size: calc(var(--op-space-scale-unit) * 71.2);
}

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

.drawer__toolbar {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-medium);
  background-color: var(--op-color-white);
  padding: var(--op-space-medium);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}

.drawer__title {
  display: flex;
  gap: var(--op-space-small);
  align-items: start;
}
.drawer__title .badge, .drawer__title .icon:not(button .icon) {
  margin-top: var(--op-space-3x-small);
}

.drawer__subtitle-item {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}

.drawer__subtitle {
  display: flex;
  align-items: center;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-on-background);
}

.drawer__panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  gap: var(--op-space-x-large);
}

.drawer__panel--padded {
  padding: var(--op-space-x-large);
}

.drawer__footer {
  display: flex;
  justify-content: center;
  min-height: var(--op-space-5x-large);
}
.drawer__footer .drawer__cancel-container {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-start;
}
.drawer__footer .drawer__save-container {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--op-space-medium);
  align-items: center;
}
.drawer__footer .drawer__save-indicator {
  color: var(--op-color-alerts-notice-on-plus-seven);
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: center;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
}

sl-dropdown::part(trigger) {
  display: flex;
  cursor: pointer;
}
sl-dropdown[disabled=true], sl-dropdown[disabled] {
  pointer-events: none;
}
sl-dropdown[disabled=true] button, sl-dropdown[disabled] button {
  opacity: var(--op-opacity-disabled);
}
sl-dropdown .dropdown__items-container {
  z-index: var(--op-z-index-dropdown);
  min-width: calc(var(--op-space-scale-unit) * 20);
  background-color: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-x-small);
}
sl-dropdown .dropdown__items-container::part(panel) {
  display: flex;
}
sl-dropdown .dropdown__items-container.hidden {
  visibility: hidden;
}
sl-dropdown .dropdown__items-container .dropdown__item::part(base) {
  flex-grow: 1;
  background-color: unset;
}
sl-dropdown .dropdown__items-container .dropdown__item:has(button[disabled], .btn--disabled) {
  pointer-events: none;
  cursor: not-allowed;
}
sl-dropdown .dropdown__items-container .dropdown__item::part(label) {
  overflow: unset;
}
sl-dropdown .dropdown__items-container .dropdown__item::part(checked-icon), sl-dropdown .dropdown__items-container .dropdown__item::part(submenu-icon) {
  display: none;
}
sl-dropdown .dropdown__items-container .dropdown__item .btn {
  --fd-radius-dropdown: 6px;
  text-align: start;
  width: 100%;
  justify-content: left;
  border-radius: var(--fd-radius-dropdown);
}
sl-dropdown .dropdown__items-container .dropdown__item .btn:has(.icon) {
  display: flex;
  justify-content: space-between !important;
}

.divider {
  --_op-divider-padding-x-large: var(--op-space-x-large);
}
.divider.divider--spacing-x-large {
  --__op-divider-padding: var(--_op-divider-padding-x-large);
}

.note {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  background-color: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  box-shadow: var(--op-shadow-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-size: var(--op-font-small);
  padding: var(--op-space-medium);
  width: 100%;
  .note__content {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-x-small);
    .note__header {
      display: flex;
      align-items: center;
      font-weight: var(--op-font-weight-semi-bold);
      color: var(--op-color-primary-on-plus-eight); /* This primary on neutral background is intentional; passes AA accessibility */
      line-height: var(--op-line-height-densest);
    }
    .note__message {
      display: flex;
      flex-direction: column;
      gap: var(--op-space-2x-small);
    }
  }
  .note__actions {
    display: flex;
    justify-content: start;
    gap: var(--op-space-small);
  }
  &.note--large {
    border-radius: var(--op-radius-large);
    padding: var(--op-space-x-large);
    gap: var(--op-space-x-large);
    .note__content {
      gap: var(--op-space-small);
      .note__header {
        font-size: var(--op-font-large);
      }
    }
    .note__message {
      gap: var(--op-space-x-small);
    }
  }
  &.note--warning {
    background: var(--op-color-alerts-warning-plus-five);
    border-color: var(--op-color-alerts-warning-plus-two);
    color: var(--op-color-alerts-warning-on-plus-five-alt);
    .note__content .note__header {
      color: var(--op-color-alerts-warning-on-plus-five);
    }
  }
  &.note--danger {
    background: var(--op-color-alerts-danger-plus-five);
    border-color: var(--op-color-alerts-danger-plus-two);
    color: var(--op-color-alerts-danger-on-plus-five-alt);
    .note__content .note__header {
      color: var(--op-color-alerts-danger-on-plus-five);
    }
  }
  &.note--success {
    background: var(--op-color-alerts-notice-plus-seven);
    border-color: var(--op-color-alerts-notice-minus-one);
    color: var(--op-color-alerts-notice-on-plus-seven-alt);
    .note__content .note__header {
      color: var(--op-color-alerts-notice-on-plus-five);
    }
  }
  /* Alternate border color if occuring against a darker background */
  &.note--on-dark {
    border-color: var(--op-color-primary-minus-two);
    &.note--warning {
      border-color: var(--op-color-alerts-warning-minus-four);
    }
    &.note--danger {
      border-color: var(--op-color-alerts-danger-minus-four);
    }
    &.note--success {
      border-color: var(--op-color-alerts-notice-minus-five);
    }
  }
}

.panel-section {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--op-space-small);
}
.panel-section .panel-section__header {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-weight: var(--op-font-weight-bold);
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.detail-field .detail-field__label {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}
.detail-field .detail-field__value {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
  text-wrap: auto;
}
.detail-field .detail-field__value.detail-field__value--multiline {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.detail-field .detail-field__link {
  text-decoration: none;
}

.turbo-progress-bar {
  height: var(--op-space-2x-small);
  background-color: var(--op-color-primary-plus-six);
}

.page-header {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max-alt);
}
.page-header .page-header__primary {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-large);
  padding: var(--op-space-medium);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-six);
}
.page-header .page-header__primary .page-header__title {
  display: flex;
  gap: var(--op-space-medium);
  align-items: center;
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-2x-large);
  line-height: var(--op-line-height-base);
  letter-spacing: var(--fd-page-title);
}
.page-header .page-header__primary .page-header__title .page-header__title-suffix {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.page-header .page-header__primary .page-header__heading {
  position: relative;
  height: 1em;
  inset-block-start: -0.02lh;
}
.page-header .page-header__primary .page-header__row:has(.page-header__group--back-link) {
  align-items: end;
}
.page-header .page-header__primary .page-header__group--back-link {
  flex-direction: column;
  align-items: start;
  gap: var(--op-space-x-small);
}
.page-header .page-header__primary:has(.tab-group) {
  padding-block-end: 0;
}
.page-header .page-header__secondary {
  display: flex;
  flex-direction: column;
  padding: var(--op-space-medium);
  gap: var(--op-space-small);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-six);
}
.page-header .page-header__row {
  display: flex;
  gap: var(--op-space-large);
  align-items: center;
  justify-content: space-between;
}
.page-header .page-header__group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--op-space-3x-large);
}
.page-header .page-header__group.page-header__group--start {
  justify-content: start;
}
.page-header .page-header__group.page-header__group--end {
  justify-content: end;
}
.page-header .page-header__group.page-header__group--3x-tight {
  gap: var(--op-space-2x-small);
}
.page-header .page-header__group.page-header__group--2x-tight {
  gap: var(--op-space-small);
}
.page-header .page-header__group.page-header__group--tight {
  gap: var(--op-space-large);
}
.page-header .page-header__group.page-header__group--loose {
  gap: var(--op-space-5x-large);
}
.page-header .page-header__group {
  /* Required for long search input to be full-width */
}
.page-header .page-header__group:has(.search-input__wrapper) {
  flex-grow: 1;
}
.page-header .page-header__run-dates {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
}
.page-header .page-header__run-dates .icon {
  color: var(--op-color-neutral-on-plus-max);
}
.page-header .form-group {
  padding: 0;
}

.app__content-area:has(.error_page__container) {
  height: 100vh;
}

.error_page__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--op-space-medium);
  align-items: center;
  background-color: var(--op-color-background);
  padding: var(--op-space-medium);
}

.error_page__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--op-space-medium);
}

.error_page__logo {
  height: var(--op-space-5x-large);
}

.error_page__header-details {
  font-size: var(--op-font-size-small);
  font-weight: var(--op-font-weight-semi-bold);
}

.error_page__image {
  max-height: 80%;
  max-width: 80%;
}

/* Input */
.form-control {
  --_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-medium);
  --__op-form-control-height: var(--_op-form-control-height-large);
  --op_input-disabled-opacity: 0.44;
  /* Size Modifiers */
  &.form-control--small {
    font-weight: var(--op-font-weight-normal);
  }
  &.form-control--medium {
    font-weight: var(--op-font-weight-semi-bold);
  }
}

.form-control:not([type=radio], [type=checkbox]) {
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-small);
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight-alt);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-small);
  box-shadow: var(--op-inset-shadow-input), inset var(--op-border-all) var(--__op-form-control-border-color);
  &:focus,
  &:focus-within,
  &:focus-visible,
  &:active {
    outline: none;
    box-shadow: 0px 0px 0px var(--op-border-width-x-large) var(--op-color-primary-plus-four), var(--fd-focus-style);
    &:hover:not(:disabled) {
      box-shadow: 0px 0px 0px var(--op-border-width-x-large) var(--op-color-primary-plus-four), var(--fd-focus-style);
    }
  }
  &::-moz-placeholder {
    color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
  }
  &::placeholder {
    color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
  }
  &:hover:not(:disabled) {
    background-color: var(--op-color-primary-plus-eight);
    color: var(--op-color-primary-on-plus-eight-alt);
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-two), var(--op-border-input);
  }
}

.disabled .form-control:not([type=radio], [type=checkbox]) {
  opacity: var(--op-opacity-disabled);
  box-shadow: var(--op-inset-shadow-input), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
  cursor: not-allowed !important;
  padding: var(--op-space-x-small) var(--op-space-small);
  /* "not(:disabled)" is used to override the specificity of the ":hover:not(:disabled)" rule above
  /* this rule still applies because it's being applied to a div with class "disabled"
  /* and not an element with the attribute disabled */
  &:hover:not(:disabled) {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: var(--op-inset-shadow-input), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
  }
  /* important is needed here to override the cursor rule given by tom select (out of our control) */
  * {
    cursor: not-allowed !important;
  }
}

.readonly .form-control:not([type=radio], [type=checkbox]) {
  opacity: var(--op-opacity-disabled);
  box-shadow: var(--op-inset-shadow-input), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
  cursor: not-allowed !important;
  padding: var(--op-space-x-small) var(--op-space-small);
  /* "not(:disabled)" is used to override the specificity of the ":hover:not(:disabled)" rule above
  /* this rule still applies because it's being applied to a div with class "disabled"
  /* and not an element with the attribute disabled */
  &:hover:not(:disabled) {
    background-color: var(--op-color-neutral-plus-seven);
    box-shadow: var(--op-inset-shadow-input), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
  }
  /* important is needed here to override the cursor rule given by tom select (out of our control) */
  * {
    cursor: not-allowed !important;
  }
}

/* State modifiers */
.form-group--error .form-control:not([type=radio], [type=checkbox]) {
  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-plus-one);
}

.form-group--warning .form-control:not([type=radio], [type=checkbox]) {
  box-shadow: var(--op-border-all) var(--op-color-alerts-warning-plus-one);
}

.form-group.form-group--error {
  gap: var(--op-space-2x-small);
}

.form-group {
  &.form-group--small {
    width: calc(var(--op-space-scale-unit) * 8); /* 80px */
  }
  &.form-group--medium {
    width: calc(var(--op-space-scale-unit) * 12); /* 120px */
  }
  /* Right-aligned "Exclude" filter switch */
  &.form-group--switch-exclude {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0;
  }
  &.form-group--no-padding {
    padding: 0;
  }
}

/* If you field has a text label that extends beyond the actual input.... consider using these suffix text styles */
.form-group {
  &.form-group--with-suffix {
    white-space: nowrap;
  }
  ~ .form-control__suffix-text {
    margin-left: var(--op-space-small);
    /* Push down suffix text to make it align vertically with the input within the form group */
    padding-top: calc(var(--op-space-scale-unit) * 4.4); /* 44px */
    font-size: var(--op-font-small);
    font-weight: var(--op-font-weight-normal);
  }
  /* Adjust suffix text to accommodate gap change where input is in error state */
  &.form-group--error {
    /* suffix text adjacent to form group in error state */
    ~ .form-control__suffix-text {
      padding-top: calc(var(--op-space-scale-unit) * 4); /* 40px */
    }
  }
}

.form-error {
  padding-top: 0;
  padding-left: 0;
  background-color: unset;
  color: var(--op-color-alerts-danger-on-minus-eight);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
}

fieldset {
  margin: unset;
  padding: unset;
  border: unset;
}

textarea.form-control {
  font-size: var(--op-font-x-small);
  resize: vertical;
  &[readonly] {
    /*Allow pointer events to allow scrolling readonly text areas,
     but remove state focus/hover styling to communicate lack of interactibility */
    pointer-events: all;
    resize: none;
    &:focus:not(:disabled) {
      background-color: var(--op-color-neutral-plus-seven);
      font-weight: var(--op-font-weight-normal);
      color: var(--op-color-neutral-on-plus-seven);
      box-shadow: unset !important;
    }
    &:hover:not(:disabled) {
      background-color: var(--op-color-neutral-plus-seven);
      font-weight: var(--op-font-weight-normal);
      color: var(--op-color-neutral-on-plus-seven);
      box-shadow: unset !important;
    }
  }
  &.monospace {
    font-weight: var(--op-font-weight-normal);
  }
  &[rows] {
    block-size: unset;
  }
}

select.form-control {
  background-image: var(--op-form-dropdown-arrow);
  content: "";
  background-position: right var(--op-space-small) center;
  background-repeat: no-repeat;
  background-size: var(--op-space-large);
  background-color: var(--op-color-neutral-plus-max);
  border-color: transparent;
  box-shadow: var(--op-border-all) var(--op-color-border), var(--op-shadow-x-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  padding-right: var(--op-space-4x-large);
  text-align: left;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
  &:not(:disabled, .btn--disabled):hover {
    /* @include btn-default-hover-styles; */
    /* Copied in because CSS does not support @mixins */
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three), var(--op-shadow-x-small);
    color: var(--op-color-primary-on-plus-eight);
  }
}

.form__checkbox {
  --__op-form-control-height: var(--_op-form-control-height-medium);
}

/* Read Only */
.form-control--read-only {
  box-shadow: none;
}

.input-with-icon {
  position: relative;
  grid-column: 1/3;
  .material-symbols-outlined {
    display: flex;
    align-items: center;
    position: absolute;
    right: var(--op-space-small);
    top: 0;
    bottom: 0;
    pointer-events: none;
  }
}

/* Looks like a readonly input without submitting a value. Rendered by PlatformUi::ReadonlyInput. */
.readonly-input {
  display: inline-grid;
  align-items: center;
  grid-column: 1/3;
  background: var(--op-color-neutral-plus-seven);
  border-radius: var(--op-radius-large);
  color: var(--op-color-neutral-on-plus-seven);
  font-size: var(--op-font-small);
  height: var(--op-input-height-large);
  padding: var(--op-space-2x-small) var(--op-space-small) var(--op-space-2x-small) var(--op-space-small);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  &.readonly-input--medium {
    width: calc(var(--op-space-scale-unit) * 12);
  }
  &.readonly-input--small {
    width: calc(var(--op-space-scale-unit) * 10);
  }
}

.form-control {
  &[readonly] {
    padding: var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-small);
    background: var(--op-color-neutral-plus-seven);
    box-shadow: none;
    color: var(--op-color-neutral-on-plus-seven);
    &::-webkit-input-placeholder {
      color: var(--op-color-neutral-on-plus-seven);
    }
  }
}

input[type=search] {
  background-image: var(--op-icon-input-search);
  content: "";
  background-position: left var(--op-space-medium) center;
  background-repeat: no-repeat;
  background-size: var(--op-space-large);
  padding-left: var(--op-space-5x-large);
  &::-moz-placeholder {
    opacity: 0.4;
  }
  &::placeholder {
    opacity: 0.4;
  }
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: var(--op-space-medium);
  width: var(--op-space-medium);
  background: var(--op-icon-search-cancel);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type=search]:focus::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: all;
}

.form-group--horizontal {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  padding: 0;
  min-width: -moz-max-content;
  min-width: max-content;
}

.form-control--numeric {
  text-align: right;
}

.form-label {
  display: flex;
  gap: var(--op-space-3x-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-weight: var(--op-font-weight-bold);
  line-height: var(--op-line-height-dense);
  font-size: var(--op-font-x-small);
  letter-spacing: 0;
  &.form-label--large {
    font-size: var(--op-font-small);
    font-weight: var(--op-font-weight-semi-bold);
  }
}

.form__container--two-column {
  display: flex;
  flex-direction: column;
  .two-column-form__row {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--op-space-medium);
    .two-column-form__column {
      width: 50%;
      &:only-of-type {
        padding-right: calc(var(--op-space-x-large) / 2);
      }
    }
  }
  .two-column-form__field-set {
    color: var(--op-color-neutral-on-plus-eight-alt);
    font-weight: var(--op-font-weight-bold);
    line-height: var(--op-line-height-dense);
    font-size: var(--op-font-x-small);
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: var(--op-space-4x-small);
  }
  .two-column-form__section {
    &:not(:last-child) {
      margin-bottom: var(--op-space-x-large);
      padding-bottom: var(--op-space-x-large);
      border-bottom: 1px solid var(--op-color-neutral-plus-four);
    }
  }
  .two-column-form__section-header {
    font-weight: var(--op-font-weight-bold);
    font-size: var(--op-font-size-medium);
    line-height: 1;
    padding-bottom: var(--op-space-medium);
    display: flex;
    gap: var(--op-space-x-small);
  }
  .two-column-form__checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--op-space-2x-small);
    padding-top: var(--op-space-large);
  }
}

/* File Form Control */
.form-control[type=file] {
  /* Fix visual bug with file input button being misaligned */
  padding-block: 0;
}

.field-list {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}
.field-list .form-group {
  padding-block: 0;
}
.field-list .form-control__suffix-text {
  padding-top: calc(var(--op-space-scale-unit) * 3.3);
}
.field-list .form-group--error ~ .form-control__suffix-text {
  padding-top: calc(var(--op-space-scale-unit) * 2.9);
}

.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 (component option defaults) */
  --__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;
  border-radius: var(--op-radius-pill);
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--op-color-neutral-base);
  block-size: var(--__op-switch-height);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
  cursor: pointer;
  inline-size: var(--__op-switch-width);
  &::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: -moz-fit-content;
    inline-size: fit-content;
  }
  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }
  &:focus-visible {
    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);
    }
    &:checked {
      &::after {
        background-color: var(--op-color-primary-plus-six);
        box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
      }
    }
  }
  /* Hover State */
  &:hover::after {
    background-color: var(--op-color-primary-plus-five);
  }
  /* Checked state */
  &:checked {
    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%);
    }
  }
  /* Disabled State */
  &[disabled] {
    cursor: not-allowed;
    opacity: var(--_op-switch-opacity-disabled);
  }
  /* 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);
  }
}

/* Switch used to exclude from search results */
.form-group--switch-exclude {
  /* Color switch label if checked */
  &:has(input:checked) {
    .form-label {
      color: var(--op-color-primary-base);
    }
  }
  /* Exclude switch label is slightly lighter font-weight than input labels */
  .form-label {
    font-weight: var(--op-font-weight-semi-bold);
  }
}

.segmented-control {
  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two);
  --_op-segmented-control-color-icon-active: light-dark(
                  var(--op-color-primary-on-plus-five),
                  var(--op-color-primary-on-minus-six)
  );
  border-radius: var(--op-radius-large);
  font-weight: var(--op-font-weight-bold);
}
.segmented-control .segmented-control__input {
  /* Selected Option */
}
.segmented-control .segmented-control__input:checked + .segmented-control__label .segmented-control__active-indicator {
  display: unset;
}
.segmented-control .segmented-control__input:checked + .segmented-control__label {
  background-color: var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-five);
}
.segmented-control .segmented-control__label {
  border-radius: var(--op-radius-medium);
}
.segmented-control .segmented-control__label .segmented-control__active-indicator {
  display: none;
}
@media not (hover: hover) {
  .segmented-control .segmented-control__label:hover {
    background-color: transparent;
    color: inherit;
  }
}

.form-card.card .readonly .form-control:not([type=radio], [type=checkbox]) {
  opacity: unset;
  font-weight: var(--op-font-weight-normal);
  box-shadow: none;
}
.form-card.card .readonly .form-control:not([type=radio], [type=checkbox]):hover:not(:disabled) {
  box-shadow: none;
  color: var(--op-color-neutral-on-plus-seven);
}
.form-card.card .readonly .ts-control {
  background-color: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
  cursor: default !important;
}

.search-input__wrapper {
  --_fd-search-input-bg-color: var(--op-color-neutral-plus-eight);
  padding: var(--op-space-x-small) var(--op-space-small);
  background: var(--_fd-search-input-bg-color);
  box-shadow: var(--op-inset-shadow-input), inset var(--op-border-all) var(--op-color-neutral-plus-four);
  border-radius: var(--op-space-x-small);
  width: 100%;
  display: flex;
  align-items: center;
  flex-grow: 1;
  max-width: calc(var(--op-space-scale-unit) * 40);
}
.search-input__wrapper .material-symbols-outlined, .search-input__wrapper .material-symbols {
  color: var(--op-color-neutral-plus-one);
  margin-right: var(--op-space-2x-small);
  padding: 1px;
}
.search-input__wrapper:focus-within {
  outline: none;
  box-shadow: 0 0 0 var(--op-border-width-x-large) var(--op-color-primary-plus-four), var(--fd-focus-style);
}
.search-input__wrapper:focus-within:hover:not(:disabled) {
  box-shadow: 0 0 0 var(--op-border-width-x-large) var(--op-color-primary-plus-four), var(--fd-focus-style);
}
.search-input__wrapper:hover:not(:disabled) {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-two), var(--op-border-input);
}
.search-input__wrapper input {
  border-style: hidden;
  outline: none;
  background: var(--_fd-search-input-bg-color);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-eight);
  width: 90%;
}
.search-input__wrapper input[aria-busy=true] {
  background: url("/assets/platform_ui/busy-0104a2d7.gif") no-repeat right center;
}
.search-input__wrapper input:-moz-placeholder + .search-input__clear-button {
  display: none;
}
.search-input__wrapper input:placeholder-shown + .search-input__clear-button {
  display: none;
}
.search-input__wrapper .search-input__clear-button {
  line-height: 0;
}
.search-input__wrapper .search-input__clear-button .material-symbols-outlined, .search-input__wrapper .search-input__clear-button .material-symbols {
  color: var(--op-color-neutral-on-plus-three);
  margin-right: 0;
}

.sl-search-input {
  --_fd-search-input-bg-color: var(--op-color-neutral-plus-eight);
  max-width: calc(var(--op-space-scale-unit) * 50);
  width: 100%;
}
.sl-search-input::part(base) {
  background: var(--_fd-search-input-bg-color);
  border-radius: var(--op-space-x-small);
}
.sl-search-input::part(input) {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-primary-on-plus-eight);
}
.sl-search-input::part(input)[aria-busy=true] {
  background: url("/assets/platform_ui/busy-0104a2d7.gif") no-repeat right center;
}
.sl-search-input::part(input)::-moz-placeholder {
  color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
}
.sl-search-input::part(input)::placeholder {
  color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
}

.auth-page {
  background-color: var(--op-color-primary-plus-one);
  background-image: url("/assets/flytedesk_background-5be2f141.svg");
  background-repeat: repeat repeat;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.sessions-page .auth-content {
  background: var(--op-color-neutral-plus-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 500px;
  min-height: 470px;
  text-decoration: none;
  border-radius: var(--op-radius-large);
  padding: var(--op-space-3x-large) var(--op-space-3x-large) var(--op-space-6x-large) var(--op-space-3x-large);
}
.sessions-page .auth-content label {
  font-weight: var(--op-font-weight-semi-bold);
}
.sessions-page .auth-content .form-group {
  padding-top: var(--op-space-x-small);
  padding-bottom: var(--op-space-x-small);
}
.sessions-page .auth-content .form-group.sign_in_remember_me {
  padding-bottom: var(--op-space-x-large);
}
.sessions-page .auth-content .title img {
  height: calc(var(--op-space-scale-unit) * 7.2);
}
.sessions-page .auth-content form {
  padding: var(--op-space-small) calc(var(--op-space-scale-unit) * 3.2);
  width: 100%;
}
.sessions-page .auth-content form .form-actions {
  display: flex;
}
.sessions-page .auth-content form .form-actions input {
  flex-grow: 1;
}

.passwords-page .auth-content {
  background: var(--op-color-neutral-plus-max);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 500px;
  min-height: 470px;
  text-decoration: none;
  border-radius: var(--op-radius-large);
  padding: var(--op-space-3x-large) var(--op-space-3x-large) var(--op-space-6x-large) var(--op-space-3x-large);
}
.passwords-page .auth-content label {
  font-weight: var(--op-font-weight-semi-bold);
}
.passwords-page .auth-content .form-group {
  padding-top: var(--op-space-x-small);
  padding-bottom: var(--op-space-x-small);
}
.passwords-page .auth-content .title img {
  height: calc(var(--op-space-scale-unit) * 7.2);
}
.passwords-page .auth-content form {
  padding: 0 calc(var(--op-space-scale-unit) * 3.2);
  width: 100%;
}
.passwords-page .auth-content form .form-actions {
  display: flex;
}
.passwords-page .auth-content form .form-actions input {
  flex-grow: 1;
}

.invitations-page .auth-content {
  background: var(--op-color-neutral-plus-max);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 500px;
  min-height: 470px;
  text-decoration: none;
  border-radius: var(--op-radius-large);
  padding: var(--op-space-3x-large) var(--op-space-3x-large) var(--op-space-6x-large) var(--op-space-3x-large);
}
.invitations-page .auth-content label {
  font-weight: var(--op-font-weight-semi-bold);
}
.invitations-page .auth-content .form-group {
  padding-top: var(--op-space-x-small);
  padding-bottom: var(--op-space-x-small);
}
.invitations-page .auth-content .title img {
  height: calc(var(--op-space-scale-unit) * 7.2);
}
.invitations-page .auth-content form {
  padding: 0 calc(var(--op-space-scale-unit) * 3.2);
  width: 100%;
}
.invitations-page .auth-content form .form-actions {
  display: flex;
}
.invitations-page .auth-content form .form-actions input {
  flex-grow: 1;
}