@use "../../../styles/base/utilities";

[data-fs-localization-selector] {
  // Design Tokens for Localization Selector
  --fs-localization-selector-max-width                          : 288px;

  // Override Popover design tokens
  --fs-popover-padding                                          : var(--fs-spacing-3) var(--fs-spacing-4);
  --fs-popover-margin                                           : 0;
  --fs-popover-border-radius                                    : var(--fs-border-radius);
  --fs-popover-bkg-color                                        : var(--fs-color-neutral-0);
  --fs-popover-indicator-translate                              : 0;
  --fs-popover-z-index                                          : var(--fs-z-index-high);

  display: flex;
  flex-direction: column;
  gap: var(--fs-spacing-2);
  align-items: flex-end;
  border: var(--fs-border-width) solid var(--fs-border-color);

  @include utilities.media(">=tablet") {
    max-width: var(--fs-localization-selector-max-width);
  }

  [data-fs-localization-selector-description] {
    margin-bottom: var(--fs-spacing-3);
    font-size: var(--fs-text-size-1);
    font-weight: var(--fs-text-weight-medium);
    color: var(--fs-color-neutral-4);
  }

  [data-fs-select-field] {
    margin-bottom: var(--fs-spacing-2);
  }

  [data-fs-popover-indicator],
  [data-fs-modal-header],
  [data-fs-popover-header] {
    display: none;
  }

  [data-fs-localization-selector-actions] {
    display: flex;
    justify-content: flex-end;
  }

  [data-fs-localization-selector-error] {
    display: flex;
    gap: var(--fs-spacing-1);
    align-items: flex-start;
    width: 100%;
    font-size: var(--fs-text-size-1);
    color: var(--fs-color-danger-text);

    [data-fs-icon] {
      flex-shrink: 0;
      color: var(--fs-color-danger-text);
    }
  }
}

[data-fs-localization-selector-mobile] {
  align-items: flex-start;

  [data-fs-localization-selector-description] {
    width: 100%;
  }

  [data-fs-slide-over-header] {
    width: 100%;
  }

  [data-fs-localization-selector-body] {
    padding: 0 var(--fs-spacing-3);
  }

  [data-fs-localization-selector-title] {
    font-size: var(--fs-text-size-3);
    font-weight: var(--fs-text-weight-semibold);
  }

  [data-fs-localization-selector-footer] {
    width: 100%;
    padding: var(--fs-spacing-3);

    [data-fs-button] {
      width: 100%;
    }
  }
}