@charset "UTF-8";
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons+Outlined';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons+Round';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons+Sharp';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone';
@import './ds/semantics/color/color.css';
@import './ds/semantics/sizing/sizing.css';
@import './ds/semantics/typography/typography.css';
@import './ds/semantics/shadow/shadow.css';
@import './ds/component.css';
:root {
  --fallback-font:
    -apple-system, blinkmacsystemfont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Text",
    "Segoe UI", roboto, helvetica, arial, sans-serif;
}

* {
  font-family: Matter, Sora, var(--fallback-font);
  scrollbar-width: 12px;
  scrollbar-color: var(--sfe-color-fill-neutral-on-subtle, #dee3e7) var(--sfe-color-fill-neutral-on-subtle, #dee3e7);
}

*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  border-radius: var(--sfe-sizing-radius-default, 8px);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--sfe-color-fill-neutral-on-subtle, #dee3e7);
  border-radius: var(--sfe-sizing-radius-default, 8px);
  border: 2px solid transparent;
}

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

body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: calc(1.325rem + 0.9vw);
}

h3 {
  font-size: calc(1.3rem + 0.6vw);
}

h4 {
  font-size: calc(1.275rem + 0.3vw);
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

@media (width >= 1200px) {
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1.5rem;
  }
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

mark {
  padding: 0.1875em;
  color: #212529;
  background-color: #fff3cd;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: #0d6efd;
  text-decoration: underline;
  background-color: transparent;
}

a:hover {
  color: #0a58ca;
}

a:not([href], [class]),
a:not([href], [class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: monospace;
  font-size: 1em;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  color: #d63384;
  word-wrap: break-word;
}

a > code {
  color: inherit;
}

kbd {
  padding: 0.1875rem 0.375rem;
  color: #fff;
  background-color: #212529;
  border-radius: 0.25rem;
}

kbd kbd {
  padding: 0;
  font-size: 1em;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

img {
  border-style: none;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: rgba(33, 37, 41, 0.75);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-size: 100%;
  line-height: 1.15;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

select:disabled {
  opacity: 1;
}

button,
[type=button],
[type=reset],
[type=submit] {
  appearance: button;
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

textarea {
  resize: vertical;
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

fieldset {
  min-width: 0;
  padding: 0.35em 0.75em 0.625em;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

@media (width >= 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  appearance: none;
}

[list]:not([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

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

::file-selector-button {
  font: inherit;
  appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

main {
  display: block;
}

details {
  display: block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
label:focus {
  outline: 0 !important;
  appearance: none !important;
  box-shadow: none !important;
  border-color: #1e5083 !important;
}

button:focus,
button:active,
button:hover {
  outline: 0 !important;
  appearance: none !important;
  box-shadow: none !important;
}

:root {
  --sfe-stack-level-base: 100;
  --sfe-stack-level-navs: calc(var(--sfe-stack-level-base) + 100);
  --sfe-stack-level-fullscreen: calc(var(--sfe-stack-level-base) + 200);
  --sfe-stack-level-dropdowns: calc(var(--sfe-stack-level-base) + 300);
  --sfe-stack-level-modals: calc(var(--sfe-stack-level-base) + 99999);
  --sfe-stack-level-alert: calc(var(--sfe-stack-level-modals) + 1);
}

/*

Usage:

<sfe-status-badge variant='solid' intent='gray'>

<el class="sfe-status-badge sfe-status-badge-{variant}-{intent}"></el>

</sfe-status-badge>

*/
/* stylelint-disable custom-property-pattern */
.sfe-status-badge {
  width: fit-content;
  padding-inline: 8px;
  padding-block: 4px;
  font-family: var(--sfe-typography-font-serif-font, Sora);
  font-size: var(--sfe-typography-font-size-label-small, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--sfe-typography-line-height-label-small, 16px);
  letter-spacing: var(--sfe-typography-space-letter-null, 0);
}
.sfe-status-badge-solid-neutral {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-grey);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-solid-info {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-blue);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-solid-positive {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-green);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-solid-critical {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-red);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-solid-warning {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-orange);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-outline-neutral {
  color: var(--sfe-badge-color-content-outline-grey);
  border: 1px solid var(--sfe-badge-color-border-outline-grey);
  background: var(--sfe-badge-color-fill-outline-default, rgba(255, 255, 255, 0));
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-outline-info {
  color: var(--sfe-badge-color-content-outline-blue);
  border: 1px solid var(--sfe-badge-color-border-outline-blue);
  background: var(--sfe-badge-color-fill-outline-default, rgba(255, 255, 255, 0));
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-outline-positive {
  color: var(--sfe-badge-color-content-outline-green);
  border: 1px solid var(--sfe-badge-color-border-outline-green);
  background: var(--sfe-badge-color-fill-outline-default, rgba(255, 255, 255, 0));
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-outline-critical {
  color: var(--sfe-badge-color-content-outline-red);
  border: 1px solid var(--sfe-badge-color-border-outline-red);
  background: var(--sfe-badge-color-fill-outline-default, rgba(255, 255, 255, 0));
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-outline-warning {
  color: var(--sfe-badge-color-content-outline-orange);
  border: 1px solid var(--sfe-badge-color-border-outline-orange);
  background: var(--sfe-badge-color-fill-outline-default, rgba(255, 255, 255, 0));
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-faded-neutral {
  color: var(--sfe-badge-color-content-faded-grey);
  background: var(--sfe-badge-color-fill-faded-grey);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-faded-info {
  color: var(--sfe-badge-color-content-faded-blue);
  background: var(--sfe-badge-color-fill-faded-blue);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-faded-positive {
  color: var(--sfe-badge-color-content-faded-green);
  background: var(--sfe-badge-color-fill-faded-green);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-faded-critical {
  color: var(--sfe-badge-color-content-faded-red);
  background: var(--sfe-badge-color-fill-faded-red);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-faded-warning {
  color: var(--sfe-badge-color-content-faded-orange);
  background: var(--sfe-badge-color-fill-faded-orange);
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-status-badge-bare-neutral {
  color: var(--sfe-badge-color-content-bare-grey);
  background: var(--sfe-badge-color-fill-bare-grey);
}
.sfe-status-badge-bare-info {
  color: var(--sfe-badge-color-content-bare-blue);
  background: var(--sfe-badge-color-fill-bare-blue);
}
.sfe-status-badge-bare-positive {
  color: var(--sfe-badge-color-content-bare-green);
  background: var(--sfe-badge-color-fill-bare-green);
}
.sfe-status-badge-bare-critical {
  color: var(--sfe-badge-color-content-bare-red);
  background: var(--sfe-badge-color-fill-bare-red);
}
.sfe-status-badge-bare-warning {
  color: var(--sfe-badge-color-content-bare-orange);
  background: var(--sfe-badge-color-fill-bare-orange);
}

/*

Usage:

<sfe-badge variant='solid' intent='gray' size='lg' isCounter=false|true>

<el class="sfe-badge sfe-badge-solid-gray sfe-badge-lg"></el>

For Counter
<el class="sfe-badge sfe-badge-{variant}-{intent} sfe-badge-{size} sfe-badge-counter"></el>

</sfe-badge>

*/
.sfe-badge {
  /* caption/small/text */
  font-family: var(--sfe-typography-font-serif-font, Sora);
  font-style: normal;
  letter-spacing: var(--sfe-typography-space-letter-null, 0);
  /* layout */
  border-radius: var(--sfe-sizing-radius-small, 4px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.sfe-badge-lg {
  /* caption/small/text */
  font-size: var(--sfe-typography-font-size-label-small, 12px);
  font-weight: 400;
  line-height: var(--sfe-typography-line-height-label-small, 16px); /* 133.333% */
  /* layout */
  height: var(--sfe-badge-sizing-size-large, 24px);
  min-width: var(--sfe-badge-sizing-size-large, 24px);
  padding: var(--sfe-badge-spacing-padding-x-null, 0) var(--sfe-badge-spacing-padding-x-small, 8px);
  gap: var(--sfe-badge-spacing-gap-mid, 4px);
}
.sfe-badge-sm {
  /* caption/small/text */
  font-size: var(--sfe-typography-font-size-caption-xsmall, 10px);
  font-weight: var(--sfe-typography-font-weight-caption-regular, 400);
  line-height: var(--sfe-typography-line-height-caption-xsmall, 12px); /* 120% */
  /* layout */
  height: var(--sfe-badge-sizing-size-small, 16px);
  min-width: var(--sfe-badge-sizing-size-small, 16px);
  padding: 0 var(--sfe-badge-spacing-padding-x-xsmall, 4px);
  gap: var(--sfe-badge-spacing-gap-small, 2px);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-solid-grey {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-grey);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-solid-blue {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-blue);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-solid-green {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-green);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-solid-red {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-red);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-solid-orange {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-orange);
}
.sfe-badge-solid-raspberry {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-raspberry);
}
.sfe-badge-solid-magenta {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-magenta);
}
.sfe-badge-solid-purple {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-purple);
}
.sfe-badge-solid-grape {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-grape);
}
.sfe-badge-solid-violet {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-violet);
}
.sfe-badge-solid-cyan {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-cyan);
}
.sfe-badge-solid-teal {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-teal);
}
.sfe-badge-solid-aquamarine {
  color: var(--sfe-badge-color-content-solid-default, rgba(255, 255, 255, 0.95));
  background: var(--sfe-badge-color-fill-solid-aquamarine);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-outline-grey {
  color: var(--sfe-badge-color-content-outline-grey);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-grey);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-outline-blue {
  color: var(--sfe-badge-color-content-outline-blue);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-blue);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-outline-green {
  color: var(--sfe-badge-color-content-outline-green);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-green);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-outline-red {
  color: var(--sfe-badge-color-content-outline-red);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-red);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-outline-orange {
  color: var(--sfe-badge-color-content-outline-orange);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-orange);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-outline-raspberry {
  color: var(--sfe-badge-color-content-outline-raspberry);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-raspberry);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-outline-magenta {
  color: var(--sfe-badge-color-content-outline-magenta);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-magenta);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-outline-purple {
  color: var(--sfe-badge-color-content-outline-purple);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-purple);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-outline-grape {
  color: var(--sfe-badge-color-content-outline-grape);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-grape);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-outline-violet {
  color: var(--sfe-badge-color-content-outline-violet);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-violet);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-outline-cyan {
  color: var(--sfe-badge-color-content-outline-cyan);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-cyan);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-outline-teal {
  color: var(--sfe-badge-color-content-outline-teal);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-teal);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-outline-aquamarine {
  color: var(--sfe-badge-color-content-outline-aquamarine);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-outline-aquamarine);
  background: var(--sfe-badge-color-fill-outline-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-faded-grey {
  color: var(--sfe-badge-color-content-faded-grey);
  background: var(--sfe-badge-color-fill-faded-grey);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-faded-blue {
  color: var(--sfe-badge-color-content-faded-blue);
  background: var(--sfe-badge-color-fill-faded-blue);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-faded-green {
  color: var(--sfe-badge-color-content-faded-green);
  background: var(--sfe-badge-color-fill-faded-green);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-faded-red {
  color: var(--sfe-badge-color-content-faded-red);
  background: var(--sfe-badge-color-fill-faded-red);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-faded-orange {
  color: var(--sfe-badge-color-content-faded-orange);
  background: var(--sfe-badge-color-fill-faded-orange);
}
.sfe-badge-faded-raspberry {
  color: var(--sfe-badge-color-content-faded-raspberry);
  background: var(--sfe-badge-color-fill-faded-raspberry);
}
.sfe-badge-faded-magenta {
  color: var(--sfe-badge-color-content-faded-magenta);
  background: var(--sfe-badge-color-fill-faded-magenta);
}
.sfe-badge-faded-purple {
  color: var(--sfe-badge-color-content-faded-purple);
  background: var(--sfe-badge-color-fill-faded-purple);
}
.sfe-badge-faded-grape {
  color: var(--sfe-badge-color-content-faded-grape);
  background: var(--sfe-badge-color-fill-faded-grape);
}
.sfe-badge-faded-violet {
  color: var(--sfe-badge-color-content-faded-violet);
  background: var(--sfe-badge-color-fill-faded-violet);
}
.sfe-badge-faded-cyan {
  color: var(--sfe-badge-color-content-faded-cyan);
  background: var(--sfe-badge-color-fill-faded-cyan);
}
.sfe-badge-faded-teal {
  color: var(--sfe-badge-color-content-faded-teal);
  background: var(--sfe-badge-color-fill-faded-teal);
}
.sfe-badge-faded-aquamarine {
  color: var(--sfe-badge-color-content-faded-aquamarine);
  background: var(--sfe-badge-color-fill-faded-aquamarine);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-bare-grey {
  color: var(--sfe-badge-color-content-bare-grey);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-grey);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-bare-blue {
  color: var(--sfe-badge-color-content-bare-blue);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-blue);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-bare-green {
  color: var(--sfe-badge-color-content-bare-green);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-green);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-bare-red {
  color: var(--sfe-badge-color-content-bare-red);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-red);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-bare-orange {
  color: var(--sfe-badge-color-content-bare-orange);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-orange);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-bare-raspberry {
  color: var(--sfe-badge-color-content-bare-raspberry);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-raspberry);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-bare-magenta {
  color: var(--sfe-badge-color-content-bare-magenta);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-magenta);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-bare-purple {
  color: var(--sfe-badge-color-content-bare-purple);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-purple);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-bare-grape {
  color: var(--sfe-badge-color-content-bare-grape);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-grape);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-bare-violet {
  color: var(--sfe-badge-color-content-bare-violet);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-violet);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-bare-cyan {
  color: var(--sfe-badge-color-content-bare-cyan);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-cyan);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-bare-teal {
  color: var(--sfe-badge-color-content-bare-teal);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-teal);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-bare-aquamarine {
  color: var(--sfe-badge-color-content-bare-aquamarine);
  border: var(--sfe-badge-sizing-border-default, 1px) solid var(--sfe-badge-color-border-bare-aquamarine);
  background: var(--sfe-badge-color-fill-bare-default);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-ghost-grey {
  color: var(--sfe-badge-color-content-ghost-grey);
  background: var(--sfe-badge-color-fill-ghost-grey);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-ghost-blue {
  color: var(--sfe-badge-color-content-ghost-blue);
  background: var(--sfe-badge-color-fill-ghost-blue);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-ghost-green {
  color: var(--sfe-badge-color-content-ghost-green);
  background: var(--sfe-badge-color-fill-ghost-green);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-ghost-red {
  color: var(--sfe-badge-color-content-ghost-red);
  background: var(--sfe-badge-color-fill-ghost-red);
}
.sfe-badge-counter {
  border-radius: var(--sfe-sizing-radius-round, 99999px);
}
.sfe-badge-ghost-orange {
  color: var(--sfe-badge-color-content-ghost-orange);
  background: var(--sfe-badge-color-fill-ghost-orange);
}
.sfe-badge-ghost-raspberry {
  color: var(--sfe-badge-color-content-ghost-raspberry);
  background: var(--sfe-badge-color-fill-ghost-raspberry);
}
.sfe-badge-ghost-magenta {
  color: var(--sfe-badge-color-content-ghost-magenta);
  background: var(--sfe-badge-color-fill-ghost-magenta);
}
.sfe-badge-ghost-purple {
  color: var(--sfe-badge-color-content-ghost-purple);
  background: var(--sfe-badge-color-fill-ghost-purple);
}
.sfe-badge-ghost-grape {
  color: var(--sfe-badge-color-content-ghost-grape);
  background: var(--sfe-badge-color-fill-ghost-grape);
}
.sfe-badge-ghost-violet {
  color: var(--sfe-badge-color-content-ghost-violet);
  background: var(--sfe-badge-color-fill-ghost-violet);
}
.sfe-badge-ghost-cyan {
  color: var(--sfe-badge-color-content-ghost-cyan);
  background: var(--sfe-badge-color-fill-ghost-cyan);
}
.sfe-badge-ghost-teal {
  color: var(--sfe-badge-color-content-ghost-teal);
  background: var(--sfe-badge-color-fill-ghost-teal);
}
.sfe-badge-ghost-aquamarine {
  color: var(--sfe-badge-color-content-ghost-aquamarine);
  background: var(--sfe-badge-color-fill-ghost-aquamarine);
}

/*

Usage:

<sfe-btn variant='solid' intent='neutral' size='lg' :disabled="true">

<el class="sfe-btn sfe-btn-{variant}-{intent} sfe-btn-{size}" :class="{'sfe-btn-disabled': prop.disabled}"></el>

</sfe-btn>

*/
/* stylelint-disable custom-property-pattern */
.sfe-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--sfe-typography-font-serif-font, Sora);
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--sfe-typography-space-letter-null, 0);
}
.sfe-btn-lg {
  padding: 0 var(--sfe-sizing-padding-default);
  border-radius: var(--sfe-sizing-radius-default, 8px);
  height: 48px;
  font-size: var(--sfe-typography-font-size-label-large, 16px);
  line-height: var(--sfe-typography-line-height-label-default, 20px);
}
.sfe-btn-md {
  padding: 0 var(--sfe-sizing-padding-default);
  border-radius: var(--sfe-sizing-radius-default, 8px);
  height: 40px;
  font-size: var(--sfe-typography-font-size-label-default, 14px);
  line-height: var(--sfe-typography-line-height-label-small, 16px);
}
.sfe-btn-sm {
  padding: 0 var(--sfe-sizing-padding-mid);
  border-radius: var(--sfe-sizing-radius-small, 4px);
  height: 32px;
  font-size: var(--sfe-typography-font-size-label-small, 12px);
  line-height: var(--sfe-typography-line-height-label-xsmall, 14px);
}
.sfe-btn-xs {
  padding: 0 var(--sfe-sizing-padding-small);
  border-radius: var(--sfe-sizing-radius-small, 4px);
  height: 24px;
  font-size: var(--sfe-typography-font-size-label-small, 12px);
  line-height: var(--sfe-typography-line-height-label-xsmall, 14px);
}
.sfe-btn:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #9747ff !important;
  outline: none;
}
.sfe-btn-solid-brand {
  color: var(--sfe-btn-color-content-solid-default);
  background-color: var(--sfe-btn-color-fill-solid-brand-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-brand-default);
}
.sfe-btn-solid-brand:hover {
  background-color: var(--sfe-btn-color-fill-solid-brand-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-brand-hover);
}
.sfe-btn-solid-brand:active {
  background-color: var(--sfe-btn-color-fill-solid-brand-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-brand-pressed);
}
.sfe-btn-solid-brand:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-solid-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-solid-neutral {
  color: var(--sfe-btn-color-content-solid-default);
  background-color: var(--sfe-btn-color-fill-solid-neutral-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-neutral-default);
}
.sfe-btn-solid-neutral:hover {
  background-color: var(--sfe-btn-color-fill-solid-neutral-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-neutral-hover);
}
.sfe-btn-solid-neutral:active {
  background-color: var(--sfe-btn-color-fill-solid-neutral-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-neutral-pressed);
}
.sfe-btn-solid-neutral:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-solid-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-solid-critical {
  color: var(--sfe-btn-color-content-solid-default);
  background-color: var(--sfe-btn-color-fill-solid-critical-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-critical-default);
}
.sfe-btn-solid-critical:hover {
  background-color: var(--sfe-btn-color-fill-solid-critical-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-critical-hover);
}
.sfe-btn-solid-critical:active {
  background-color: var(--sfe-btn-color-fill-solid-critical-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-critical-pressed);
}
.sfe-btn-solid-critical:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-solid-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-solid-positive {
  color: var(--sfe-btn-color-content-solid-default);
  background-color: var(--sfe-btn-color-fill-solid-positive-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-positive-default);
}
.sfe-btn-solid-positive:hover {
  background-color: var(--sfe-btn-color-fill-solid-positive-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-positive-hover);
}
.sfe-btn-solid-positive:active {
  background-color: var(--sfe-btn-color-fill-solid-positive-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-positive-pressed);
}
.sfe-btn-solid-positive:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-solid-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-solid-inverse {
  color: var(--sfe-btn-color-content-solid-inverse);
  background-color: var(--sfe-btn-color-fill-solid-inverse-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-inverse-default);
}
.sfe-btn-solid-inverse:hover {
  background-color: var(--sfe-btn-color-fill-solid-inverse-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-inverse-hover);
}
.sfe-btn-solid-inverse:active {
  background-color: var(--sfe-btn-color-fill-solid-inverse-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-solid-inverse-pressed);
}
.sfe-btn-solid-inverse:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-solid-inverse-disabled) !important;
  opacity: 0.5;
  cursor: no-drop;
}
.sfe-btn-outline-brand {
  color: var(--sfe-btn-color-content-outline-brand);
  background-color: var(--sfe-btn-color-fill-outline-brand-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-brand-default);
}
.sfe-btn-outline-brand:hover {
  background-color: var(--sfe-btn-color-fill-outline-brand-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-brand-hover);
}
.sfe-btn-outline-brand:active {
  background-color: var(--sfe-btn-color-fill-outline-brand-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-brand-pressed);
}
.sfe-btn-outline-brand:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-disabled) !important;
  background: var(--sfe-btn-color-fill-outline-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-outline-neutral {
  color: var(--sfe-btn-color-content-outline-neutral);
  background-color: var(--sfe-btn-color-fill-outline-neutral-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-neutral-default);
}
.sfe-btn-outline-neutral:hover {
  background-color: var(--sfe-btn-color-fill-outline-neutral-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-neutral-hover);
}
.sfe-btn-outline-neutral:active {
  background-color: var(--sfe-btn-color-fill-outline-neutral-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-neutral-pressed);
}
.sfe-btn-outline-neutral:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-disabled) !important;
  background: var(--sfe-btn-color-fill-outline-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-outline-critical {
  color: var(--sfe-btn-color-content-outline-critical);
  background-color: var(--sfe-btn-color-fill-outline-critical-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-critical-default);
}
.sfe-btn-outline-critical:hover {
  background-color: var(--sfe-btn-color-fill-outline-critical-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-critical-hover);
}
.sfe-btn-outline-critical:active {
  background-color: var(--sfe-btn-color-fill-outline-critical-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-critical-pressed);
}
.sfe-btn-outline-critical:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-disabled) !important;
  background: var(--sfe-btn-color-fill-outline-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-outline-positive {
  color: var(--sfe-btn-color-content-outline-positive);
  background-color: var(--sfe-btn-color-fill-outline-positive-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-positive-default);
}
.sfe-btn-outline-positive:hover {
  background-color: var(--sfe-btn-color-fill-outline-positive-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-positive-hover);
}
.sfe-btn-outline-positive:active {
  background-color: var(--sfe-btn-color-fill-outline-positive-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-positive-pressed);
}
.sfe-btn-outline-positive:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-disabled) !important;
  background: var(--sfe-btn-color-fill-outline-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-outline-inverse {
  color: var(--sfe-btn-color-content-outline-inverse);
  background-color: var(--sfe-btn-color-fill-outline-inverse-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-inverse-default);
}
.sfe-btn-outline-inverse:hover {
  background-color: var(--sfe-btn-color-fill-outline-inverse-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-inverse-hover);
}
.sfe-btn-outline-inverse:active {
  background-color: var(--sfe-btn-color-fill-outline-inverse-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-inverse-pressed);
}
.sfe-btn-outline-inverse:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-outline-inverse-disabled) !important;
  background: var(--sfe-btn-color-fill-outline-inverse-disabled) !important;
  opacity: 0.5;
  cursor: no-drop;
}
.sfe-btn-faded-brand {
  color: var(--sfe-btn-color-content-faded-brand);
  background-color: var(--sfe-btn-color-fill-faded-brand-default);
  transition: background-color 0.2s;
  border: none;
}
.sfe-btn-faded-brand:hover {
  background-color: var(--sfe-btn-color-fill-faded-brand-hover);
  border: none;
}
.sfe-btn-faded-brand:active {
  background-color: var(--sfe-btn-color-fill-faded-brand-pressed);
  border: none;
}
.sfe-btn-faded-brand:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-faded-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-faded-neutral {
  color: var(--sfe-btn-color-content-faded-neutral);
  background-color: var(--sfe-btn-color-fill-faded-neutral-default);
  transition: background-color 0.2s;
  border: none;
}
.sfe-btn-faded-neutral:hover {
  background-color: var(--sfe-btn-color-fill-faded-neutral-hover);
  border: none;
}
.sfe-btn-faded-neutral:active {
  background-color: var(--sfe-btn-color-fill-faded-neutral-pressed);
  border: none;
}
.sfe-btn-faded-neutral:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-faded-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-faded-critical {
  color: var(--sfe-btn-color-content-faded-critical);
  background-color: var(--sfe-btn-color-fill-faded-critical-default);
  transition: background-color 0.2s;
  border: none;
}
.sfe-btn-faded-critical:hover {
  background-color: var(--sfe-btn-color-fill-faded-critical-hover);
  border: none;
}
.sfe-btn-faded-critical:active {
  background-color: var(--sfe-btn-color-fill-faded-critical-pressed);
  border: none;
}
.sfe-btn-faded-critical:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-faded-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-faded-positive {
  color: var(--sfe-btn-color-content-faded-positive);
  background-color: var(--sfe-btn-color-fill-faded-positive-default);
  transition: background-color 0.2s;
  border: none;
}
.sfe-btn-faded-positive:hover {
  background-color: var(--sfe-btn-color-fill-faded-positive-hover);
  border: none;
}
.sfe-btn-faded-positive:active {
  background-color: var(--sfe-btn-color-fill-faded-positive-pressed);
  border: none;
}
.sfe-btn-faded-positive:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-faded-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-faded-inverse {
  color: var(--sfe-btn-color-content-faded-inverse);
  background-color: var(--sfe-btn-color-fill-faded-inverse-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-faded-inverse-default);
}
.sfe-btn-faded-inverse:hover {
  background-color: var(--sfe-btn-color-fill-faded-inverse-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-faded-inverse-hover);
}
.sfe-btn-faded-inverse:active {
  background-color: var(--sfe-btn-color-fill-faded-inverse-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-faded-inverse-pressed);
}
.sfe-btn-faded-inverse:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-faded-inverse-disabled) !important;
  opacity: 0.5;
  cursor: no-drop;
}
.sfe-btn-ghost-brand {
  color: var(--sfe-btn-color-content-ghost-brand);
  background-color: var(--sfe-btn-color-fill-ghost-brand-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-brand-default);
}
.sfe-btn-ghost-brand:hover {
  background-color: var(--sfe-btn-color-fill-ghost-brand-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-brand-hover);
}
.sfe-btn-ghost-brand:active {
  background-color: var(--sfe-btn-color-fill-ghost-brand-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-brand-pressed);
}
.sfe-btn-ghost-brand:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-disabled) !important;
  background: var(--sfe-btn-color-fill-ghost-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-ghost-neutral {
  color: var(--sfe-btn-color-content-ghost-neutral);
  background-color: var(--sfe-btn-color-fill-ghost-neutral-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-neutral-default);
}
.sfe-btn-ghost-neutral:hover {
  background-color: var(--sfe-btn-color-fill-ghost-neutral-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-neutral-hover);
}
.sfe-btn-ghost-neutral:active {
  background-color: var(--sfe-btn-color-fill-ghost-neutral-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-neutral-pressed);
}
.sfe-btn-ghost-neutral:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-disabled) !important;
  background: var(--sfe-btn-color-fill-ghost-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-ghost-critical {
  color: var(--sfe-btn-color-content-ghost-critical);
  background-color: var(--sfe-btn-color-fill-ghost-critical-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-critical-default);
}
.sfe-btn-ghost-critical:hover {
  background-color: var(--sfe-btn-color-fill-ghost-critical-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-critical-hover);
}
.sfe-btn-ghost-critical:active {
  background-color: var(--sfe-btn-color-fill-ghost-critical-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-critical-pressed);
}
.sfe-btn-ghost-critical:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-disabled) !important;
  background: var(--sfe-btn-color-fill-ghost-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-ghost-positive {
  color: var(--sfe-btn-color-content-ghost-positive);
  background-color: var(--sfe-btn-color-fill-ghost-positive-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-positive-default);
}
.sfe-btn-ghost-positive:hover {
  background-color: var(--sfe-btn-color-fill-ghost-positive-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-positive-hover);
}
.sfe-btn-ghost-positive:active {
  background-color: var(--sfe-btn-color-fill-ghost-positive-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-positive-pressed);
}
.sfe-btn-ghost-positive:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-disabled) !important;
  background: var(--sfe-btn-color-fill-ghost-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-ghost-inverse {
  color: var(--sfe-btn-color-content-ghost-inverse);
  background-color: var(--sfe-btn-color-fill-ghost-inverse-default);
  transition: background-color 0.2s;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-inverse-default);
}
.sfe-btn-ghost-inverse:hover {
  background-color: var(--sfe-btn-color-fill-ghost-inverse-hover);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-inverse-hover);
}
.sfe-btn-ghost-inverse:active {
  background-color: var(--sfe-btn-color-fill-ghost-inverse-pressed);
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-inverse-pressed);
}
.sfe-btn-ghost-inverse:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: var(--sfe-btn-sizing-border-default, 1px) solid var(--sfe-btn-color-border-ghost-inverse-disabled) !important;
  background: var(--sfe-btn-color-fill-ghost-inverse-disabled) !important;
  opacity: 0.5;
  cursor: no-drop;
}
.sfe-btn-bare-brand {
  color: var(--sfe-btn-color-content-bare-brand);
  background-color: var(--sfe-btn-color-fill-bare-brand-default);
  transition: background-color 0.2s;
  border: none;
}
.sfe-btn-bare-brand:hover {
  background-color: var(--sfe-btn-color-fill-bare-brand-hover);
  border: none;
}
.sfe-btn-bare-brand:active {
  background-color: var(--sfe-btn-color-fill-bare-brand-pressed);
  border: none;
}
.sfe-btn-bare-brand:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-bare-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-bare-neutral {
  color: var(--sfe-btn-color-content-bare-neutral);
  background-color: var(--sfe-btn-color-fill-bare-neutral-default);
  transition: background-color 0.2s;
  border: none;
}
.sfe-btn-bare-neutral:hover {
  background-color: var(--sfe-btn-color-fill-bare-neutral-hover);
  border: none;
}
.sfe-btn-bare-neutral:active {
  background-color: var(--sfe-btn-color-fill-bare-neutral-pressed);
  border: none;
}
.sfe-btn-bare-neutral:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-bare-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-bare-critical {
  color: var(--sfe-btn-color-content-bare-critical);
  background-color: var(--sfe-btn-color-fill-bare-critical-default);
  transition: background-color 0.2s;
  border: none;
}
.sfe-btn-bare-critical:hover {
  background-color: var(--sfe-btn-color-fill-bare-critical-hover);
  border: none;
}
.sfe-btn-bare-critical:active {
  background-color: var(--sfe-btn-color-fill-bare-critical-pressed);
  border: none;
}
.sfe-btn-bare-critical:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-bare-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-bare-positive {
  color: var(--sfe-btn-color-content-bare-positive);
  background-color: var(--sfe-btn-color-fill-bare-positive-default);
  transition: background-color 0.2s;
  border: none;
}
.sfe-btn-bare-positive:hover {
  background-color: var(--sfe-btn-color-fill-bare-positive-hover);
  border: none;
}
.sfe-btn-bare-positive:active {
  background-color: var(--sfe-btn-color-fill-bare-positive-pressed);
  border: none;
}
.sfe-btn-bare-positive:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-bare-disabled) !important;
  cursor: no-drop;
}
.sfe-btn-bare-inverse {
  color: var(--sfe-btn-color-content-bare-inverse);
  background-color: var(--sfe-btn-color-fill-bare-inverse-default);
  transition: background-color 0.2s;
  border: none;
}
.sfe-btn-bare-inverse:hover {
  background-color: var(--sfe-btn-color-fill-bare-inverse-hover);
  border: none;
}
.sfe-btn-bare-inverse:active {
  background-color: var(--sfe-btn-color-fill-bare-inverse-pressed);
  border: none;
}
.sfe-btn-bare-inverse:disabled {
  color: var(--sfe-color-interaction-disabled-strong, #9ea8b3) !important;
  border: none !important;
  background: var(--sfe-btn-color-fill-bare-inverse-disabled) !important;
  opacity: 0.5;
  cursor: no-drop;
}

/*
 * SHR brand color bridge — TEMPORARY.
 *
 * Brand color *utility* overrides (.text-* / .bg-* / .border-*) with SHR brand values inlined as real
 * hex (no CSS variables). !important makes these win regardless of load order / prefix. Values are the
 * old shrfe-styles.css palette — pixel-parity with the pre-migration app.
 *
 * SCOPE: brand color utilities only. Component brand rules (.btn-*, .alert-*, .active states) are
 * intentionally excluded — those move to Sfe* components (STYLEX_MIGRATION.md §6).
 *
 * DELETE once brand lives in the design system (@shrfe/dt) and @shrfe/stylex's color theme is
 * brand-driven. See STYLEX_MIGRATION.md §3/§5.
 */
.bg-amber-dk-1 {
  background-color: #a69923 !important;
}

.bg-amber-dk-2 {
  background-color: #686016 !important;
}

.bg-amber-lt-1 {
  background-color: #f2eaa0 !important;
}

.bg-amber-lt-2 {
  background-color: #faf6d9 !important;
}

.bg-amber-lt-3 {
  background-color: #fdfcf4 !important;
}

.bg-amber {
  background-color: #e4d22f !important;
}

.bg-black {
  background-color: #000 !important;
}

.bg-danger-dk-1 {
  background-color: #932020 !important;
}

.bg-danger-dk-2 {
  background-color: #5c1414 !important;
}

.bg-danger-lt-1 {
  background-color: #e69e9e !important;
}

.bg-danger-lt-2 {
  background-color: #f5d8d8 !important;
}

.bg-danger-lt-3 {
  background-color: #fcf4f4 !important;
}

.bg-danger {
  background-color: #c92b2b !important;
}

.bg-primary-dk-1 {
  background-color: #1e5083 !important;
}

.bg-primary-dk-2 {
  background-color: #133252 !important;
}

.bg-primary-lt-1 {
  background-color: #9dbcdc !important;
}

.bg-primary-lt-2 {
  background-color: #d8e4f1 !important;
}

.bg-primary-lt-3 {
  background-color: #f4f7fb !important;
}

.bg-primary {
  background-color: #296db3 !important;
}

.bg-purple-dk-1 {
  background-color: #701778 !important;
}

.bg-purple-dk-2 {
  background-color: #460f4b !important;
}

.bg-purple-lt-1 {
  background-color: #d099d5 !important;
}

.bg-purple-lt-2 {
  background-color: #ecd6ee !important;
}

.bg-purple-lt-3 {
  background-color: #f9f3fa !important;
}

.bg-purple {
  background-color: #991fa4 !important;
}

.bg-secondary-dk-1 {
  background-color: #333 !important;
}

.bg-secondary-dk-2 {
  background-color: #202020 !important;
}

.bg-secondary-lt-1 {
  background-color: #aaa !important;
}

.bg-secondary-lt-2 {
  background-color: #ddd !important;
}

.bg-secondary-lt-3 {
  background-color: #f5f5f5 !important;
}

.bg-secondary-muted {
  background-color: #777 !important;
}

.bg-secondary {
  background-color: #454545 !important;
}

.bg-success-dk-1 {
  background-color: #1e8323 !important;
}

.bg-success-dk-2 {
  background-color: #135216 !important;
}

.bg-success-lt-1 {
  background-color: #9ddca0 !important;
}

.bg-success-lt-2 {
  background-color: #d8f1d9 !important;
}

.bg-success-lt-3 {
  background-color: #f4fbf4 !important;
}

.bg-success {
  background-color: #29b32f !important;
}

.bg-violet-blue-dk-1 {
  background-color: #2e3b84 !important;
}

.bg-violet-blue-dk-2 {
  background-color: #1d2553 !important;
}

.bg-violet-blue-lt-1 {
  background-color: #a7afdd !important;
}

.bg-violet-blue-lt-2 {
  background-color: #dcdff1 !important;
}

.bg-violet-blue-lt-3 {
  background-color: #f5f6fb !important;
}

.bg-violet-blue {
  background-color: #3f51b5 !important;
}

.bg-warning-dk-1 {
  background-color: #d07908 !important;
}

.bg-warning-dk-2 {
  background-color: #8f5305 !important;
}

.bg-warning-lt-1 {
  background-color: #fbcb8c !important;
}

.bg-warning-lt-2 {
  background-color: #fde7cb !important;
}

.bg-warning-lt-3 {
  background-color: #fffaf5 !important;
}

.bg-warning {
  background-color: #f79b24 !important;
}

.bg-white {
  background-color: #fff !important;
}

.border-amber-dk-1 {
  border-color: #a69923 !important;
}

.border-amber-dk-2 {
  border-color: #686016 !important;
}

.border-amber-lt-1 {
  border-color: #f2eaa0 !important;
}

.border-amber-lt-2 {
  border-color: #faf6d9 !important;
}

.border-amber-lt-3 {
  border-color: #fdfcf4 !important;
}

.border-amber {
  border-color: #e4d22f !important;
}

.border-black {
  border-color: #000 !important;
}

.border-danger-dk-1 {
  border-color: #932020 !important;
}

.border-danger-dk-2 {
  border-color: #5c1414 !important;
}

.border-danger-lt-1 {
  border-color: #e69e9e !important;
}

.border-danger-lt-2 {
  border-color: #f5d8d8 !important;
}

.border-danger-lt-3 {
  border-color: #fcf4f4 !important;
}

.border-danger {
  border-color: #c92b2b !important;
}

.border-primary-dk-1 {
  border-color: #1e5083 !important;
}

.border-primary-dk-2 {
  border-color: #133252 !important;
}

.border-primary-lt-1 {
  border-color: #9dbcdc !important;
}

.border-primary-lt-2 {
  border-color: #d8e4f1 !important;
}

.border-primary-lt-3 {
  border-color: #f4f7fb !important;
}

.border-primary {
  border-color: #296db3 !important;
}

.border-purple-dk-1 {
  border-color: #701778 !important;
}

.border-purple-dk-2 {
  border-color: #460f4b !important;
}

.border-purple-lt-1 {
  border-color: #d099d5 !important;
}

.border-purple-lt-2 {
  border-color: #ecd6ee !important;
}

.border-purple-lt-3 {
  border-color: #f9f3fa !important;
}

.border-purple {
  border-color: #991fa4 !important;
}

.border-secondary-dk-1 {
  border-color: #333 !important;
}

.border-secondary-dk-2 {
  border-color: #202020 !important;
}

.border-secondary-lt-1 {
  border-color: #aaa !important;
}

.border-secondary-lt-2 {
  border-color: #ddd !important;
}

.border-secondary-lt-3 {
  border-color: #f5f5f5 !important;
}

.border-secondary-muted {
  border-color: #777 !important;
}

.border-secondary {
  border-color: #454545 !important;
}

.border-success-dk-1 {
  border-color: #1e8323 !important;
}

.border-success-dk-2 {
  border-color: #135216 !important;
}

.border-success-lt-1 {
  border-color: #9ddca0 !important;
}

.border-success-lt-2 {
  border-color: #d8f1d9 !important;
}

.border-success-lt-3 {
  border-color: #f4fbf4 !important;
}

.border-success {
  border-color: #29b32f !important;
}

.border-violet-blue-dk-1 {
  border-color: #2e3b84 !important;
}

.border-violet-blue-dk-2 {
  border-color: #1d2553 !important;
}

.border-violet-blue-lt-1 {
  border-color: #a7afdd !important;
}

.border-violet-blue-lt-2 {
  border-color: #dcdff1 !important;
}

.border-violet-blue-lt-3 {
  border-color: #f5f6fb !important;
}

.border-violet-blue {
  border-color: #3f51b5 !important;
}

.border-warning-dk-1 {
  border-color: #d07908 !important;
}

.border-warning-dk-2 {
  border-color: #8f5305 !important;
}

.border-warning-lt-1 {
  border-color: #fbcb8c !important;
}

.border-warning-lt-2 {
  border-color: #fde7cb !important;
}

.border-warning-lt-3 {
  border-color: #fffaf5 !important;
}

.border-warning {
  border-color: #f79b24 !important;
}

.border-white {
  border-color: #fff !important;
}

.text-amber-dk-1 {
  color: #a69923 !important;
}

.text-amber-dk-2 {
  color: #686016 !important;
}

.text-amber-lt-1 {
  color: #f2eaa0 !important;
}

.text-amber-lt-2 {
  color: #faf6d9 !important;
}

.text-amber-lt-3 {
  color: #fdfcf4 !important;
}

.text-amber {
  color: #e4d22f !important;
}

.text-black {
  color: #000 !important;
}

.text-danger-dk-1 {
  color: #932020 !important;
}

.text-danger-dk-2 {
  color: #5c1414 !important;
}

.text-danger-lt-1 {
  color: #e69e9e !important;
}

.text-danger-lt-2 {
  color: #f5d8d8 !important;
}

.text-danger-lt-3 {
  color: #fcf4f4 !important;
}

.text-danger {
  color: #c92b2b !important;
}

.text-primary-dk-1 {
  color: #1e5083 !important;
}

.text-primary-dk-2 {
  color: #133252 !important;
}

.text-primary-lt-1 {
  color: #9dbcdc !important;
}

.text-primary-lt-2 {
  color: #d8e4f1 !important;
}

.text-primary-lt-3 {
  color: #f4f7fb !important;
}

.text-primary {
  color: #296db3 !important;
}

.text-purple-dk-1 {
  color: #701778 !important;
}

.text-purple-dk-2 {
  color: #460f4b !important;
}

.text-purple-lt-1 {
  color: #d099d5 !important;
}

.text-purple-lt-2 {
  color: #ecd6ee !important;
}

.text-purple-lt-3 {
  color: #f9f3fa !important;
}

.text-purple {
  color: #991fa4 !important;
}

.text-secondary-dk-1 {
  color: #333 !important;
}

.text-secondary-dk-2 {
  color: #202020 !important;
}

.text-secondary-lt-1 {
  color: #aaa !important;
}

.text-secondary-lt-2 {
  color: #ddd !important;
}

.text-secondary-lt-3 {
  color: #f5f5f5 !important;
}

.text-secondary-muted {
  color: #777 !important;
}

.text-secondary {
  color: #454545 !important;
}

.text-success-dk-1 {
  color: #1e8323 !important;
}

.text-success-dk-2 {
  color: #135216 !important;
}

.text-success-lt-1 {
  color: #9ddca0 !important;
}

.text-success-lt-2 {
  color: #d8f1d9 !important;
}

.text-success-lt-3 {
  color: #f4fbf4 !important;
}

.text-success {
  color: #29b32f !important;
}

.text-violet-blue-dk-1 {
  color: #2e3b84 !important;
}

.text-violet-blue-dk-2 {
  color: #1d2553 !important;
}

.text-violet-blue-lt-1 {
  color: #a7afdd !important;
}

.text-violet-blue-lt-2 {
  color: #dcdff1 !important;
}

.text-violet-blue-lt-3 {
  color: #f5f6fb !important;
}

.text-violet-blue {
  color: #3f51b5 !important;
}

.text-warning-dk-1 {
  color: #d07908 !important;
}

.text-warning-dk-2 {
  color: #8f5305 !important;
}

.text-warning-lt-1 {
  color: #fbcb8c !important;
}

.text-warning-lt-2 {
  color: #fde7cb !important;
}

.text-warning-lt-3 {
  color: #fffaf5 !important;
}

.text-warning {
  color: #f79b24 !important;
}

.text-white {
  color: #fff !important;
}