@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/component.css';
* {
  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;
}

:root {
  --sfe-stack-level-base: 100;
  --sfe-stack-level-navs: calc(var(--sfe-stack-level-base) + 100);
  --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-base) + 99999);
}

/*

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;
}