@use '../../variables' as *;

.sky-theme-modern {
  /* color */
  --sky-background-color-page-default: #{$sky-theme-modern-background-color-page-default};
  --sky-background-color-neutral-light: #{$sky-theme-modern-background-color-page-default};
  --sky-background-color-primary-dark: #{$sky-theme-modern-background-color-primary-dark};
  --sky-background-color-disabled: #{$sky-theme-modern-background-color-disabled};

  --sky-border-color-neutral-medium: #{$sky-theme-modern-border-color-neutral-medium};
  --sky-border-color-neutral-medium-dark: #{$sky-theme-modern-border-color-neutral-medium-dark};

  --sky-highlight-color-info: #{$sky-highlight-color-info};
  --sky-highlight-color-success: #{$sky-highlight-color-success};
  --sky-highlight-color-warning: #{$sky-highlight-color-warning};
  --sky-highlight-color-danger: #{$sky-highlight-color-danger};

  --sky-text-color-deemphasized: #{$sky-theme-modern-font-deemphasized-color};
  --sky-text-color-action-primary: #{$sky-theme-modern-text-color-action-primary};
  --sky-text-color-action-primary-hover: #{darken(
      $sky-theme-modern-text-color-action-primary,
      10%
    )};

  /* margin */
  --sky-margin-inline-xs: #{$sky-theme-modern-margin-inline-xs};
  --sky-margin-inline-sm: #{$sky-theme-modern-margin-inline-sm};
  --sky-margin-inline-lg: #{$sky-theme-modern-margin-inline-lg};
  --sky-margin-inline-xl: #{$sky-theme-modern-margin-inline-xl};
  --sky-margin-inline-xxl: #{$sky-theme-modern-margin-inline-xxl};

  --sky-margin-stacked-xs: #{$sky-theme-modern-margin-stacked-xs};
  --sky-margin-stacked-sm: #{$sky-theme-modern-margin-stacked-sm};
  --sky-margin-stacked-lg: #{$sky-theme-modern-margin-stacked-lg};
  --sky-margin-stacked-xl: #{$sky-theme-modern-margin-stacked-xl};
  --sky-margin-stacked-xxl: #{$sky-theme-modern-margin-stacked-xxl};

  /* padding */
  --sky-padding-even-md: #{$sky-theme-modern-space-md};
  --sky-padding-even-xl: #{$sky-theme-modern-space-xl};
  --sky-padding-half: #{$sky-padding-half};

  /* component colors */
  --sky-background-color-input-selected: #{$sky-color-blue-05};
  --sky-background-color-item-selected: #{$sky-color-blue-05};

  /* switch */
  --sky-switch-size: #{$sky-switch-size-modern};

  &.sky-theme-mode-dark {
    /* color */
    --sky-background-color-page-default: #{$sky-theme-modern-mode-dark-background-color-page-default};
    --sky-background-color-neutral-light: #{$sky-theme-modern-mode-dark-background-color-page-default};
    --sky-background-color-primary-dark: #{$sky-theme-modern-mode-dark-background-color-primary-dark};
    --sky-background-color-disabled: transparent;

    --sky-border-color-neutral-medium: #{$sky-theme-modern-mode-dark-border-color-neutral-medium};

    --sky-text-color-default: #{$sky-theme-modern-mode-dark-font-body-default-color};
    --sky-text-color-deemphasized: #{$sky-theme-modern-mode-dark-font-deemphasized-color};
    --sky-text-color-action-primary: #{$sky-theme-modern-mode-dark-text-color-action-primary};
    --sky-text-color-action-primary-hover: #{darken(
        $sky-theme-modern-mode-dark-text-color-action-primary,
        10%
      )};
  }
}
