/* ========================================================= */
/* Components: Interactive Elements                          */
/* ========================================================= */



    .sg-component-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-small);
      align-items: center;
    }

    .sg-component-column {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-small);
      width: fit-content;
    }

    /*
      Form preview surface only:
      All form elements in this component are intentionally shown on the form-area background.
      This wrapper provides only that evaluation background and must not be implemented as part of the form control itself.
      The current preview background uses light-grey according to the style foundations.
    */
    .sg-form-preview-area {
      display: inline-flex;
      flex-direction: column;
      gap: var(--spacing-small);
      width: fit-content;
      padding: var(--spacing-large);
      border-radius: var(--radius-card);
      background: var(--surface-form-preview);
    }

    .sg-pulldown-demo {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      gap: var(--spacing-small);
      width: fit-content;
    }


    .sg-state-example {
      display: grid;
      grid-template-columns: calc(var(--interaction-height) * 6) auto;
      gap: var(--spacing-small);
      align-items: center;
    }

    .sg-state-example__label {
      margin: 0;
      color: var(--text-control-default);
    }

    .sg-activatable-control {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-activatable-row {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-interaction-element {
      box-sizing: border-box;
      height: var(--interaction-height);
      padding:
        var(--interaction-padding-vertical)
        var(--interaction-padding-horizontal);
      border: var(--border-none);
      border-radius: var(--radius-interaction);
      box-shadow: var(--shadow-none);
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--text-control-default);
      background: var(--surface-control-default);
    }

    .sg-form-active {
      background: var(--surface-control-active);
      color: var(--text-control-default);
    }

    .sg-form-inactive-selectable {
      background: var(--surface-control-inactive);
      color: var(--text-control-default);
    }

    .sg-form-disabled {
      background: var(--surface-control-disabled);
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-interaction-element:focus,
    .sg-interaction-element:focus-visible {
      outline: none;
    }

    .sg-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: var(--font-weight-semibold);
      cursor: pointer;
      text-decoration: none;
    }

    .sg-button--active {
      background: var(--surface-button-active);
      color: var(--text-control-default);
    }

    .sg-button--process {
      background: var(--surface-button-process);
      color: var(--text-button-process);
    }

    .sg-button--process-inactive {
      background: var(--surface-button-process-inactive);
      color: var(--text-button-process);
    }

    .sg-button--inactive {
      background: var(--surface-button-active);
      color: var(--text-control-disabled);
    }

    .sg-button:disabled,
    .sg-button--disabled {
      cursor: not-allowed;
      color: var(--text-control-disabled);
    }

    .sg-button--process-inactive:disabled {
      color: var(--text-button-process);
    }

    .sg-tab-button-group {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-small);
      align-items: center;
    }

    .sg-tab-button-group[data-component-size="compact"] {
      background: var(--surface-tab-compact-background);
    }

    .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button {
      padding-inline: var(--layout-tab-navigation-large-padding-inline);
    }

    .sg-tab-button[aria-selected="true"] {
      background: var(--surface-tab-selected);
      color: var(--text-tab-selected);
    }

    .sg-tab-button[aria-selected="false"] {
      background: var(--surface-tab-unselected);
      color: var(--text-tab-unselected);
    }

    .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] {
      background: var(--surface-tab-compact-unselected);
      color: var(--text-control-default);
    }

    .sg-tab-button--compact {
      height: var(--compact-interaction-height);
      padding:
        var(--compact-interaction-padding-vertical)
        var(--compact-interaction-padding-horizontal);
      font-size: var(--font-size-small);
    }

    .sg-pulldown {
      font-weight: var(--font-weight-regular);
      appearance: none;
      padding-left: var(--layout-pulldown-padding-inline);
      padding-right: calc(
        var(--layout-pulldown-chevron-offset)
        + var(--layout-pulldown-chevron-reserved-space)
      );
      background-image: var(--icon-pulldown-chevron);
      background-position: right var(--layout-pulldown-chevron-offset) center;
      background-size: calc(var(--interaction-height) * 0.375) calc(var(--interaction-height) * 0.25);
      background-repeat: no-repeat;
    }

    .sg-pulldown-demo__trigger {
      display: block;
      width: 100%;
      min-width: 0;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sg-pulldown--selected {
      background-color: var(--surface-control-active);
      color: var(--text-control-default);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sg-pulldown--inactive-selectable {
      background-color: var(--surface-control-inactive);
      color: var(--text-control-default);
    }

    .sg-pulldown-demo[data-activatable="true"] .sg-pulldown-demo__trigger.sg-pulldown--inactive-selectable {
      opacity: var(--disabled-opacity);
    }

    .sg-pulldown--disabled {
      background-color: var(--surface-control-disabled);
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-input-single-line {
      font-weight: var(--font-weight-regular);
      color: var(--text-control-default);
      -webkit-appearance: none;
      appearance: none;
    }

    .sg-input-single-line::placeholder {
      color: var(--text-control-disabled);
      opacity: 1;
    }

    .sg-input-single-line--inactive-selectable {
      color: var(--text-control-default);
    }

    .sg-input-single-line--disabled {
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-input-single-line-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .sg-input-single-line-wrap .sg-input-single-line {
      padding-right: calc(var(--interaction-padding-horizontal) + var(--interaction-height));
    }

    .sg-input-clear-button {
      position: absolute;
      top: 0;
      right: 0;
      display: none;
      align-items: center;
      justify-content: center;
      width: var(--interaction-height);
      height: var(--interaction-height);
      padding: 0;
      margin: 0;
      border: var(--border-none);
      border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0;
      box-shadow: var(--shadow-none);
      -webkit-appearance: none;
      appearance: none;
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      line-height: 1;
      color: var(--text-control-default);
      background: var(--surface-input-clear);
      cursor: pointer;
    }

    .sg-input-single-line-wrap[data-has-value="true"] .sg-input-clear-button {
      display: inline-flex;
    }

    .sg-search-field-row {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
      white-space: nowrap;
      flex-wrap: nowrap;
    }

    .sg-search-field-input {
      width: var(--layout-search-field-width);
    }

    .sg-search-result-count {
      color: var(--color-dark-grey);
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
    }

    .sg-labeled-input-row {
      display: flex;
      align-items: center;
      gap: 0;
      width: auto;
      max-width: none;
    }

    .sg-labeled-input-row .sg-label {
      min-width: 0;
      flex: 0 0 auto;
      margin-right: var(--spacing-large);
    }

    .sg-labeled-input-row .sg-input-single-line,
    .sg-labeled-input-row .sg-input-multi-line {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-form-input-field-max-width);
    }

    .sg-labeled-input-row:has(.sg-input-multi-line) {
      align-items: flex-start;
    }

    .sg-input-multi-line {
      box-sizing: border-box;
      min-height: calc(var(--interaction-height) * 2.75);
      padding: var(--interaction-padding-vertical) var(--interaction-padding-horizontal);
      border: var(--border-control);
      border-radius: var(--radius-interaction);
      box-shadow: var(--shadow-interaction-inset);
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--text-control-default);
      background: var(--surface-control-inactive);
      resize: vertical;
    }

    .sg-input-component .sg-form-preview-area {
      width: 100%;
      box-sizing: border-box;
    }

    #component-pulldown .sg-form-preview-area {
      width: 100%;
      box-sizing: border-box;
    }

    #component-pulldown .sg-state-example {
      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
      width: 100%;
    }

    #component-pulldown .sg-state-example > :last-child {
      width: 100%;
      min-width: 0;
    }

    #component-pulldown .sg-pulldown-demo {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
    }

    #component-pulldown .sg-labeled-input-row {
      width: 100%;
      max-width: none;
    }

    #component-pulldown .sg-labeled-input-row .sg-pulldown,
    #component-pulldown .sg-labeled-input-row .sg-pulldown-demo {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
    }

    #component-pulldown .sg-pulldown-demo__trigger,
    #component-pulldown .sg-state-example > .sg-pulldown {
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
    }

    #component-pulldown .sg-activatable-row {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      align-items: center;
      column-gap: var(--spacing-large);
      width: 100%;
    }

    #component-pulldown .sg-pulldown-activatable-header {
      display: grid;
      grid-template-columns: max-content max-content;
      align-items: center;
      column-gap: var(--spacing-small);
      width: 100%;
      justify-content: start;
    }

    #component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle {
      grid-column: 1;
    }

    #component-pulldown .sg-pulldown-activatable-header .sg-label {
      grid-column: 2;
      min-width: 0;
    }

    #component-pulldown .sg-activatable-row .sg-pulldown-demo {
      width: 100%;
      max-width: var(--layout-input-field-max-width);
      min-width: 0;
    }

    .sg-input-component .sg-state-example {
      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
    }

    @media (max-width: 48rem) {
      .sg-input-component .sg-form-preview-area {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      #component-pulldown .sg-form-preview-area {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .sg-input-component .sg-state-example {
        grid-template-columns: 1fr;
        align-items: start;
        width: 100%;
      }

      #component-pulldown .sg-state-example {
        grid-template-columns: 1fr;
        align-items: start;
        width: 100%;
      }

      .sg-input-component .sg-state-example > :last-child {
        width: 100%;
        min-width: 0;
      }

      #component-pulldown .sg-state-example > :last-child {
        width: 100%;
        min-width: 0;
      }

      #component-pulldown .sg-labeled-input-row .sg-pulldown,
      #component-pulldown .sg-labeled-input-row .sg-pulldown-demo {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      #component-pulldown .sg-activatable-row {
        grid-template-columns: 1fr;
        align-items: start;
        row-gap: var(--spacing-small);
        width: 100%;
        max-width: 100%;
      }

      .sg-labeled-input-row {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
      }

      .sg-labeled-input-row .sg-label {
        min-width: 0;
        flex: 0 0 auto;
        margin-right: 0;
        margin-bottom: var(--spacing-large);
      }

      .sg-labeled-input-row .sg-input-single-line,
      .sg-labeled-input-row .sg-input-multi-line {
        min-width: 0;
        max-width: 100%;
        width: 100%;
      }
    }

    .sg-mode-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
      height: auto;
      padding: 0;
      border: var(--border-none);
      border-radius: 0;
      box-shadow: var(--shadow-none);
      appearance: none;
      -webkit-tap-highlight-color: transparent;
      background: transparent;
      cursor: pointer;
    }

    .sg-mode-toggle:focus,
    .sg-mode-toggle:focus-visible {
      outline: none;
    }

    .sg-mode-toggle__label {
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      line-height: var(--line-height-base);
      color: var(--text-control-default);
    }

    .sg-mode-toggle__switch {
      position: relative;
      width: var(--layout-mode-toggle-width);
      height: var(--interaction-height);
      border-radius: var(--radius-interaction);
      background: var(--surface-toggle-track);
    }

    .sg-mode-toggle__handle {
      position: absolute;
      top: 0;
      right: 0;
      width: calc(100% / 2);
      height: 100%;
      border-radius: var(--radius-interaction);
      background: var(--surface-toggle-handle);
    }

    .sg-mode-toggle[data-active="absolute"] .sg-mode-toggle__handle {
      left: 0;
      right: auto;
    }

    .sg-mode-toggle[data-active="relative"] .sg-mode-toggle__handle {
      left: auto;
      right: 0;
    }

    .sg-mode-toggle--local .sg-mode-toggle__label {
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-regular);
    }

    .sg-mode-toggle--local .sg-mode-toggle__switch {
      width: calc(var(--layout-mode-toggle-local-height) * var(--layout-mode-toggle-local-width-factor));
      height: var(--layout-mode-toggle-local-height);
    }

    .sg-activation-toggle-pattern {
      display: flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-activation-mode-toggle {
      gap: 0;
    }

    .sg-activation-mode-toggle .sg-mode-toggle__switch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      overflow: hidden;
    }

    .sg-activation-mode-toggle .sg-mode-toggle__handle {
      z-index: 1;
    }

    .sg-activation-mode-toggle__switch-label {
      position: relative;
      z-index: 2;
      text-align: center;
      font-family: var(--font-family-base);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-regular);
      line-height: var(--layout-mode-toggle-local-height);
      text-transform: lowercase;
      color: var(--text-control-default);
    }

    .sg-activation-mode-toggle[data-active="absolute"] .sg-activation-mode-toggle__switch-label--left,
    .sg-activation-mode-toggle[data-active="relative"] .sg-activation-mode-toggle__switch-label--right {
      color: var(--text-toggle-label-active);
    }

    .sg-slider-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--spacing-small);
      width: 100%;
      max-width: none;
    }

    .sg-slider-row .sg-label {
      min-width: var(--layout-input-label-width);
      flex: 0 0 var(--layout-input-label-width);
      color: var(--text-control-default);
    }

    .sg-slider {
      flex: 1 1 14rem;
      width: 100%;
      min-width: 0;
      max-width: var(--layout-input-field-max-width);
      height: var(--interaction-height);
      margin: 0;
      padding: 0;
      border: 0;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      cursor: pointer;
    }

    .sg-slider::-webkit-slider-runnable-track {
      height: var(--dimension-slider-track-height);
      border-radius: var(--radius-slider-track);
      background:
        linear-gradient(
          to right,
          var(--surface-slider-progress) 0%,
          var(--surface-slider-progress) var(--sg-slider-progress, 0%),
          var(--surface-slider-track) var(--sg-slider-progress, 0%),
          var(--surface-slider-track) 100%
        );
    }

    .sg-slider::-webkit-slider-thumb {
      width: var(--dimension-slider-thumb-size);
      height: var(--dimension-slider-thumb-size);
      margin-top: var(--dimension-slider-thumb-offset-top);
      border: 0;
      border-radius: 50%;
      -webkit-appearance: none;
      appearance: none;
      background: var(--surface-slider-thumb);
    }

    .sg-slider::-moz-range-track {
      height: var(--dimension-slider-track-height);
      border: 0;
      border-radius: var(--radius-slider-track);
      background: var(--surface-slider-track);
    }

    .sg-slider::-moz-range-progress {
      height: var(--dimension-slider-track-height);
      border-radius: var(--radius-slider-track);
      background: var(--surface-slider-progress);
    }

    .sg-slider::-moz-range-thumb {
      width: var(--dimension-slider-thumb-size);
      height: var(--dimension-slider-thumb-size);
      border: 0;
      border-radius: 50%;
      background: var(--surface-slider-thumb);
    }

    .sg-slider-value {
      flex: 0 0 auto;
      min-width: calc(var(--interaction-height) * 1.25);
      white-space: nowrap;
      text-align: right;
      color: var(--text-control-default);
    }

    .sg-slider-row--inactive-selectable {
      opacity: var(--disabled-opacity);
    }

    #component-slider .sg-slider-row {
      display: grid;
      grid-template-columns:
        max-content
        minmax(0, 1fr)
        auto;
      align-items: center;
      column-gap: var(--spacing-large);
      width: 100%;
    }

    #component-slider .sg-state-example {
      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
      width: 100%;
    }

    #component-slider .sg-form-preview-area {
      width: 100%;
      box-sizing: border-box;
    }

    #component-slider .sg-state-example > :last-child {
      width: 100%;
      min-width: 0;
    }

    #component-slider .sg-slider-row .sg-label {
      min-width: 0;
      flex: 0 0 auto;
      grid-column: 1;
    }

    #component-slider .sg-slider-row .sg-slider {
      width: 100%;
      max-width: var(--layout-input-field-max-width);
      min-width: 0;
      grid-column: 2;
    }

    #component-slider .sg-state-example > .sg-slider-row,
    #component-slider .sg-activatable-row .sg-slider-row {
      max-width: var(--layout-input-field-max-width);
    }

    #component-slider .sg-slider-row .sg-slider-value {
      min-width: 0;
      grid-column: 3;
      justify-self: start;
      align-self: center;
      display: block;
      margin: 0;
      line-height: 1;
    }

    #component-slider .sg-activatable-row {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      align-items: center;
      column-gap: var(--spacing-large);
      width: 100%;
    }

    #component-slider .sg-slider-activatable-header {
      display: grid;
      grid-template-columns: max-content max-content;
      column-gap: var(--spacing-large);
      align-items: center;
      width: 100%;
      justify-content: start;
    }

    #component-slider .sg-slider-activatable-header .sg-label {
      grid-column: 2;
      min-width: 0;
    }

    #component-slider .sg-slider-activatable-header .sg-mode-toggle {
      grid-column: 1;
    }

    #component-slider .sg-activatable-row .sg-slider-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: var(--spacing-large);
      width: 100%;
    }

    #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
      width: 100%;
      max-width: var(--layout-input-field-max-width);
      min-width: 0;
      grid-column: 1;
    }

    #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
      grid-column: 2;
      justify-self: start;
      min-width: 0;
      align-self: center;
      display: block;
      margin: 0;
      line-height: 1;
    }

    .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
      display: grid;
      grid-template-columns:
        var(--layout-input-label-width)
        minmax(0, 1fr)
        auto;
      align-items: center;
      column-gap: var(--spacing-small);
    }

    .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
      min-width: 0;
      flex: 0 0 auto;
      grid-column: 1;
      grid-row: 1;
    }

    .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
      min-width: 0;
      max-width: 100%;
      width: 100%;
      grid-column: 2;
      grid-row: 1;
    }

    .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
      min-width: calc(var(--interaction-height) * 1.25);
      justify-self: end;
      align-self: center;
      white-space: nowrap;
      grid-column: 3;
      grid-row: 1;
    }

    @media (max-width: 48rem) {
      #component-slider .sg-form-preview-area {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      #component-slider .sg-state-example {
        grid-template-columns: 1fr;
        align-items: start;
        width: 100%;
      }

      #component-slider .sg-state-example > :last-child {
        width: 100%;
        min-width: 0;
      }

      #component-slider .sg-activatable-row {
        grid-template-columns: 1fr;
        align-items: start;
        row-gap: var(--spacing-small);
      }

      #component-slider .sg-slider-activatable-header .sg-label {
        grid-column: 2;
        grid-row: 1;
      }

      #component-slider .sg-slider-activatable-header .sg-mode-toggle {
        grid-column: 1;
        grid-row: 1;
      }

      #component-slider .sg-activatable-row .sg-slider-row {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--spacing-large);
        align-items: center;
        width: 100%;
      }

      #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
        width: 100%;
      }

      #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
        justify-self: start;
        align-self: center;
        margin: 0;
        line-height: 1;
      }

    }

    .sg-sandwich-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--interaction-height) + var(--spacing-small));
      height: calc(var(--interaction-height) + var(--spacing-small));
      padding: 0;
      cursor: pointer;
    }

    .sg-sandwich-button--small {
      width: calc(var(--interaction-height) * 0.9);
      height: calc(var(--interaction-height) * 0.9);
    }

    .sg-sandwich-button__icon {
      width: var(--sandwich-line-width);
      height: auto;
      display: flex;
      flex-direction: column;
      gap: var(--sandwich-line-gap);
      justify-content: center;
    }

    .sg-sandwich-button__line {
      display: block;
      width: 100%;
      height: var(--sandwich-line-height);
      border-radius: var(--radius-interaction);
    }

    .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-button__line {
      background: var(--icon-sandwich-line-portal);
    }

    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
      height: calc(var(--sandwich-line-height) - 1px);
      background: var(--icon-sandwich-line-portal);
    }

    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon {
      width: calc(var(--sandwich-line-width) - 3px);
    }

    .sg-sandwich-menu-wrap {
      position: relative;
      display: inline-flex;
    }

    .sg-sandwich-menu-panel {
      position: absolute;
      top: calc(100% + var(--spacing-small));
      right: 0;
      display: none;
      flex-direction: column;
      gap: var(--spacing-small);
      width: max-content;
      padding: var(--spacing-large);
      border: var(--border-none);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-overlay);
      z-index: var(--layer-pulldown-panel);
    }

    .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-panel {
      background: var(--surface-menu-panel-portal);
    }

    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-panel {
      background: var(--surface-menu-panel-portal);
    }

    .sg-sandwich-menu-wrap[data-open="true"] .sg-sandwich-menu-panel {
      display: flex;
    }

    .sg-sandwich-menu-link {
      margin: 0;
      text-decoration: none;
      white-space: nowrap;
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-base);
    }

    .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-link {
      color: var(--text-menu-link-portal);
    }

    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-link {
      color: var(--text-menu-link-portal);
    }

    .sg-sandwich-menu-wrap[data-align="left"] .sg-sandwich-menu-panel {
      right: auto;
      left: 0;
    }

    .sg-sandwich-menu-wrap[data-align="right"] .sg-sandwich-menu-panel {
      right: 0;
      left: auto;
    }

    .sg-help-icon-wrap {
      position: relative;
      display: inline-flex;
      vertical-align: middle;
    }

    .sg-help-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--small-interaction-element-size);
      height: var(--small-interaction-element-size);
      padding: 0;
      border: var(--border-none);
      border-radius: 50%;
      box-shadow: var(--shadow-none);
      font-family: var(--font-family-base);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-semibold);
      line-height: 1;
      color: var(--text-help-icon);
      background: var(--surface-help-icon);
      cursor: pointer;
    }

    .sg-help-icon-panel {
      position: absolute;
      top: calc(100% + var(--spacing-small));
      left: 0;
      z-index: var(--layer-pulldown-panel);
      display: none;
      width: var(--layout-help-panel-width);
      max-width: calc(100vw - (2 * var(--spacing-large)));
      box-sizing: border-box;
      overflow-wrap: anywhere;
      padding: var(--spacing-large);
      border-radius: var(--radius-card);
      color: var(--text-help-panel);
      background: var(--surface-help-panel);
      box-shadow: var(--shadow-overlay);
    }

    @supports (width: 100dvw) {
      .sg-help-icon-panel {
        width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large))));
        max-width: calc(100dvw - (2 * var(--spacing-large)));
      }
    }

    .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel {
      display: block;
    }

    .sg-help-icon-wrap[data-open="true"] {
      z-index: var(--layer-pulldown-panel);
    }

    .sg-help-icon-wrap[data-align="left"] .sg-help-icon-panel {
      left: 0;
      right: auto;
    }

    .sg-help-icon-wrap[data-align="right"] .sg-help-icon-panel {
      left: auto;
      right: 0;
    }

    .sg-pulldown-panel {
      position: absolute;
      top: calc(100% + var(--spacing-small));
      left: 0;
      z-index: var(--layer-pulldown-panel);
      display: none;
      flex-direction: column;
      gap: var(--spacing-small);
      min-width: 100%;
      width: max-content;
      max-width: min(
        var(--layout-multiselect-pulldown-panel-desktop-width),
        calc(100dvw - (2 * var(--spacing-large)))
      );
      box-sizing: border-box;
      padding-block: var(--spacing-large);
      padding-inline: var(--layout-pulldown-panel-padding-inline);
      border-radius: var(--radius-card);
      background: var(--surface-pulldown-panel);
      box-shadow: var(--shadow-overlay);
    }

    .sg-pulldown-demo[data-open="true"] .sg-pulldown-panel {
      display: inline-flex;
    }

    .sg-pulldown-demo[data-align="left"] .sg-pulldown-panel {
      left: 0;
      right: auto;
    }

    .sg-pulldown-demo[data-align="right"] .sg-pulldown-panel {
      left: auto;
      right: 0;
    }

    .sg-pulldown-panel__row {
      display: grid;
      grid-template-columns: calc(var(--interaction-height) * 5) calc(var(--interaction-height) * 7) var(--interaction-height);
      gap: var(--spacing-small);
      align-items: center;
    }

    .sg-pulldown-panel__label {
      margin: 0;
      color: var(--text-control-default);
    }

.sg-pulldown-panel__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
      width: var(--interaction-height);
      height: var(--interaction-height);
      padding: 0;
      border: var(--border-none);
      border-radius: var(--radius-interaction);
      background: var(--surface-activatable-remove);
  color: var(--text-activatable-remove);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

    .sg-pulldown-panel__remove[hidden] {
      display: none;
    }

    .sg-pulldown-panel__row--disabled {
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-pulldown-panel__row--disabled .sg-pulldown,
    .sg-pulldown-panel__row--disabled .sg-pulldown-panel__label {
      color: var(--text-control-disabled);
    }

    .sg-pulldown-option-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-small);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sg-pulldown-option {
      display: flex;
      gap: var(--spacing-small);
      align-items: flex-start;
      padding-block: var(--interaction-padding-vertical);
      padding-inline: var(--layout-pulldown-option-padding-inline);
      border-radius: var(--radius-interaction);
      white-space: normal;
      overflow-wrap: anywhere;
      color: var(--text-control-default);
      cursor: pointer;
    }

    .sg-pulldown-option--selected {
      background: var(--surface-control-active);
    }

    .sg-pulldown-option--disabled {
      color: var(--text-control-disabled);
    }

    .sg-pulldown-option__checkbox {
      width: var(--font-size-base);
      height: var(--font-size-base);
      margin: 0;
    }

    .sg-checkbox-field {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--small-interaction-element-size);
      height: var(--small-interaction-element-size);
      padding: 0;
      border: var(--border-none);
      border-radius: var(--radius-interaction);
      box-shadow: var(--shadow-none);
      color: var(--text-control-default);
      background: var(--surface-checkbox-default);
      cursor: pointer;
    }

    .sg-checkbox-field--on-grey,
    .sg-checkbox-field--on-color {
      background: var(--surface-checkbox-on-context);
    }

    .sg-checkbox-field__mark {
      display: none;
      font-family: var(--font-family-base);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      line-height: 1;
    }

    .sg-checkbox-field[aria-checked="true"] .sg-checkbox-field__mark {
      display: inline;
    }

    .sg-checkbox-field.sg-form-active {
      background: var(--surface-control-active);
      color: var(--text-control-default);
    }

    .sg-checkbox-field--inactive-selectable {
      color: var(--text-control-default);
      background: var(--surface-control-inactive);
      opacity: var(--disabled-opacity);
    }

    .sg-checkbox-field--disabled {
      color: var(--text-control-disabled);
      background: var(--surface-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-checkbox-field-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-small);
    }

    .sg-checkbox-field-option {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
      color: var(--text-control-default);
      flex-wrap: wrap;
    }

    .sg-pulldown-panel__checkbox-list .sg-checkbox-field-option.sg-body {
      margin-bottom: 0;
    }

    #component-checkbox-field .sg-checkbox-field-option .sg-state-example__label,
    #component-radio-field .sg-checkbox-field-option .sg-state-example__label {
      flex: 0 0 100%;
      margin-bottom: var(--spacing-small);
    }

    .sg-checkbox-field-option--inactive-selectable {
      color: var(--text-control-default);
    }

    #component-checkbox-field .sg-checkbox-field-option[data-activatable="true"],
    #component-radio-field .sg-checkbox-field-option[data-activatable="true"] {
      gap: var(--spacing-large);
    }

    .sg-radio-activatable-group__choices {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-radio-activatable-group__choice {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
    }

    .sg-radio-activatable-group__choice > span {
      color: var(--text-control-default);
      opacity: 1;
    }

    #component-radio-activatable[data-component-state="inactive-selectable"] .sg-radio-activatable-group__choice > span {
      opacity: var(--disabled-opacity);
    }

    #component-radio-activatable[data-component-state="active"] .sg-radio-activatable-group__choice > span {
      opacity: 1;
    }

    #component-radio-field .sg-checkbox-field-option {
      display: grid;
      grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--spacing-small);
      width: 100%;
    }

    #component-radio-field .sg-checkbox-field-option .sg-state-example__label {
      grid-column: 1;
      margin-bottom: 0;
    }

    #component-radio-field .sg-radio-field-row {
      grid-column: 2;
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-small);
      min-width: 0;
      flex-wrap: nowrap;
    }

    #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices {
      margin-left: var(--spacing-large);
    }

    @media (max-width: 48rem) {
      #component-radio-field .sg-checkbox-field-option {
        grid-template-columns: 1fr;
        align-items: start;
      }

      #component-radio-field .sg-checkbox-field-option .sg-state-example__label,
      #component-radio-field .sg-radio-field-row {
        grid-column: 1;
      }

      #component-radio-field .sg-radio-field-row {
        flex-wrap: wrap;
      }

      #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices {
        flex: 0 0 100%;
        margin-left: 0;
      }
    }

    .sg-checkbox-field-option--disabled {
      color: var(--text-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-radio-field {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--small-interaction-element-size);
      height: var(--small-interaction-element-size);
      padding: 0;
      border: var(--border-none);
      border-radius: 50%;
      box-shadow: var(--shadow-none);
      color: var(--text-control-default);
      background: var(--surface-radio-default);
      cursor: pointer;
    }

    .sg-radio-field__mark {
      display: none;
      width: calc(var(--small-interaction-element-size) * 0.44);
      height: calc(var(--small-interaction-element-size) * 0.44);
      border-radius: 50%;
      background: var(--icon-radio-mark);
    }

    .sg-radio-field[aria-checked="true"] .sg-radio-field__mark {
      display: block;
    }

    .sg-radio-field--inactive-selectable {
      color: var(--text-control-default);
      background: var(--surface-radio-default);
      opacity: var(--disabled-opacity);
    }

    .sg-radio-field--disabled {
      color: var(--text-control-disabled);
      background: var(--surface-control-disabled);
      opacity: var(--disabled-opacity);
      cursor: not-allowed;
    }

    .sg-hyperlink {
      color: var(--text-hyperlink);
      text-decoration: none;
    }