@use '@style/theme/index.scss' as global;

@forward '@style/theme/index.scss';
@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;

@use 'sass:string';
@use '@style/theme/index.scss' as *;

$image-radius: $radius-small;
// title
$image-font-size-title: $font-size-title-1;
$image-font-weight-title: $font-weight-500;
// description
$image-font-size-description: $font-size-body-3;
$image-color-title_footer_outer-text: var(string.unquote('#{$sd-cssvars-prefix}-color-text-1'));
$image-color-title_footer_inner-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
$image-color-description_footer_inner-text: var(
  string.unquote('#{$sd-cssvars-prefix}-color-white')
);
$image-color-description_footer_outer-text: var(
  string.unquote('#{$sd-cssvars-prefix}-color-neutral-6')
);
// actions
$image-spacing-actions-left: $spacing-6;
// actions item
$image-font-size-actions-item: 14px;
$image-padding-actions-item-vertical: $spacing-none;
$image-padding-actions-item-horizontal: $spacing-none;
$image-spacing-actions-item-left: $spacing-6;
$image-radius-actions-item: $radius-small;
$image-color-actions-item_footer_inner_hover-bg: rgb(0 0 0 / 50%);
$image-color-actions-item_footer_outer_hover-bg: var(
  string.unquote('#{$sd-cssvars-prefix}-color-neutral-2')
);
$image-color-actions-item_trigger-text: var(
  string.unquote('#{$sd-cssvars-prefix}-color-neutral-8')
);
$image-color-actions-item_trigger_hover-bg: var(
  string.unquote('#{$sd-cssvars-prefix}-color-neutral-2')
);
$image-spacing-actions-trigger-item-vertical: 5px;
$image-spacing-actions-trigger-item-horizontal: 4px;
// footer
$image-color-footer_inner-bg: linear-gradient(360deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 0%) 100%);
$image-color-footer_inner-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
$image-padding-footer_inner_vertical: 9px;
$image-padding-footer_inner_horizontal: 16px;

$image-spacing-footer_inner_simple-vertical: $spacing-6;
$image-spacing-footer_inner_simple-horizontal: $spacing-7;
$image-color-footer_outer-text: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-8'));
$image-spacing-footer-top: $spacing-2;
// error
$image-color-error-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-1'));
$image-color-error-text: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-4'));
$image-font-size-error-icon: 60px;
$image-font-size-error-text: $font-size-body-1;
$image-line-height-error-text: 1.6667;
$image-size-error-min-height: 100px;
$image-spacing-error-padding: $spacing-7;
// loader
$image-color-loader-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-1'));
$image-size-loader-min-height: 100px;
// loader spin
$image-font-size-loader-spin: 32px;
$image-color-loader-spin-text: $color-primary-6;
$image-color-loader-spin-text-text: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-6'));
$image-font-size-loader-spin-text: $font-size-title-1;

// preview mask
$image-preview-color-mask-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-mask-bg'));
// preview scale value
$image-preview-size-scale-value-height: 32px;
$image-preview-spacing-scale-value-vertical: 7px;
$image-preview-spacing-scale-value-horizontal: 10px;
$image-preview-font-size-scale-value: $font-size-body-1;
$image-preview-color-scale-value-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
$image-preview-color-scale-value-bg: rgb(255 255 255 / 8%);
// preview toolbar
$image-preview-color-toolbar-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-2'));
$image-preview-radius-toolbar: $radius-medium;
$image-preview-spacing-toolbar-vertical: $spacing-2;
$image-preview-spacing-toolbar-horizontal: $spacing-7;
$image-preview-spacing-toolbar-horizontal_simple: $spacing-2;
$image-preview-spacing-toolbar-vertical_simple: $spacing-2;

$image-preview-position-toolbar-bottom: 46px;
// preview toolbar action
$image-preview-font-size-action: 14px;
$image-preview-color-action-text: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-8'));
$image-preview-radius-action: $radius-small;
$image-preview-color-action-bg: $color-transparent;
$image-preview-color-action_hover-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-2'));
$image-preview-color-action_hover-text: $color-primary-6;
$image-preview-color-action_disabled-bg: transparent;
$image-preview-color-action_disabled-text: var(
  string.unquote('#{$sd-cssvars-prefix}-color-text-4')
);
$image-preview-font-size-action-name: $font-size-body-1;
$image-preview-spacing-action-name-right: $spacing-6;
$image-preview-padding-action-content: 13px;
$image-preview-margin-action-right: $spacing-none;
// preview trigger
$image-preview-spacing-trigger-padding-vertical: $spacing-6;
$image-preview-spacing-trigger-padding-horizontal: $spacing-7;
$image-preview-margin-action-bottom: $spacing-none;

// preview loading
$image-preview-color-loading-text: $color-primary-6;
$image-preview-color-loading-bg: #232324;
$image-preview-font-size-loading: 18px;
$image-preview-spacing-loading-padding: $spacing-5;
$image-preview-size-loading-width: 48px;
$image-preview-size-loading-height: 48px;
$image-preview-radius-loading: $radius-medium;
// preview close-btn
$image-preview-size-close-btn-width: 32px;
$image-preview-size-close-icon: 14px;
$image-preview-color-close-btn-bg: rgb(0 0 0 / 50%);
$image-preview-color-close-btn-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
$image-preview-position-close-btn-right: 36px;
$image-preview-position-close-btn-top: 36px;
// preview arrow
$image-preview-arrow-position: $spacing-8;
$image-preview-arrow-size: $size-8;
$image-preview-arrow-font-size: $size-4;
$image-preview-arrow-color-icon: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
$image-preview-arrow-color-icon_disabled: rgb(255 355 255 / 30%);
$image-preview-arrow-color-bg: rgb(255 355 255 / 30%);
$image-preview-arrow-color-bg_hover: rgb(255 355 255 / 50%);
$image-preview-arrow-color-bg_disabled: rgb(255 355 255 / 20%);

// image trigger
$image-trigger-spacing-padding-vertical: 6px;
$image-trigger-spacing-padding-horizontal: 4px;
$image-trigger-color-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-5'));
$image-trigger-color-border: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-3'));
$image-trigger-size-border: 1px;
$image-trigger-radius: 4px;