/* ========================================================= */
/* Patterns: Options Row                                     */
/* ========================================================= */

.sg-options-row {
  --surface-control-default: var(--surface-options-row-control);
  --surface-control-active: var(--surface-options-row-control-selected);
  --surface-input-clear: var(--surface-options-row-input-clear);
  --surface-toggle-track: var(--surface-options-row-toggle-track);
  --surface-toggle-handle: var(--surface-options-row-toggle-handle);
  --surface-help-icon: var(--surface-options-row-help-icon);
  --surface-help-panel: var(--surface-options-row-help-panel);
  --text-control-default: var(--text-options-row-default);
  --text-control-disabled: var(--text-options-row-placeholder);
  --text-help-icon: var(--text-options-row-help-icon);
  --text-help-panel: var(--text-options-row-help-panel);
  --layout-mode-toggle-width: var(--layout-options-row-mode-toggle-width);
  --layout-help-panel-width: var(--layout-options-row-help-panel-width);
  margin-top: var(--layout-options-row-margin-top);
  display: flex;
  justify-content: space-between;
  gap: var(--layout-options-row-main-gap);
  padding:
    var(--card-segment-padding-vertical)
    var(--layout-page-content-inset-inline);
  border: var(--border-none);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-none);
  background: var(--surface-options-row);
}

.sg-options-row__left,
.sg-options-row__right {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-options-row-group-gap);
  align-items: center;
}

.sg-options-row__left {
  justify-content: flex-start;
}

.sg-options-row__right {
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin-left: auto;
}

@media (max-width: 48rem) {
  .sg-options-row {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .sg-options-row__right,
  .sg-options-row__left {
    padding:
      var(--card-segment-padding-vertical)
      var(--card-segment-padding-horizontal);
  }

  .sg-options-row__right {
    order: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin-left: 0;
  }

  .sg-options-row__left {
    order: 2;
    box-shadow: inset 0 1px 0 var(--divider-options-row-mobile);
  }

  .sg-options-row__left > .sg-pulldown-demo,
  .sg-options-row__left > .sg-input-single-line-wrap,
  .sg-options-row__left > .sg-search-field-row {
    flex: 1 1 calc(50% - var(--layout-options-row-group-gap));
    min-width: 0;
  }

.sg-options-row__left > .sg-input-single-line-wrap,
.sg-options-row__left > .sg-search-field-row {
  flex-basis: 100%;
  }

  .sg-options-row .sg-search-field-input {
    display: inline-flex;
    align-items: stretch;
  }

  .sg-options-row .sg-search-field-input .sg-input-single-line {
    padding-right: var(--interaction-padding-horizontal);
  }

  .sg-options-row .sg-search-field-input[data-has-value="true"] .sg-input-single-line {
    border-radius: var(--radius-interaction) 0 0 var(--radius-interaction);
  }

  .sg-options-row .sg-search-field-input .sg-input-clear-button {
    position: static;
    flex: 0 0 var(--interaction-height);
    height: auto;
    border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0;
  }

  .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,
  .sg-options-row__left > .sg-pulldown-demo .sg-pulldown {
    width: 100%;
  }

  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
    width: min(
      var(--layout-pulldown-panel-form-mobile-width),
      calc(100vw - (2 * var(--spacing-large)))
    );
    min-width: 0;
    max-width: calc(100vw - (2 * var(--spacing-large)));
  }

  .sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper,
  .sg-options-row .sg-pulldown-panel .sg-form-sections-card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--spacing-large);
    row-gap: var(--spacing-small);
  }

  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
    min-width: 100%;
    flex: 0 0 100%;
  }

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

  .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
    min-width: calc(var(--interaction-height) * 1.25);
    align-self: center;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .sg-pulldown-panel__row {
    grid-template-columns: minmax(0, 1fr) var(--interaction-height);
  }

  .sg-pulldown-panel__label {
    grid-column: 1 / -1;
  }
}