@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';

@forward '@components/input/style/token.scss';

@use '@style/theme/index.scss' as *;
@use '@components/input/style/token.scss' as *;

$color-preview-size-mini: global.$size-4;

$color-preview-size-small: 22px;

$color-preview-size-medium: global.$size-6;

$color-preview-size-large: 26px;

$color-input-size-mini-padding: (($input-size-mini-height - $color-preview-size-mini) * 0.5)
  global.$spacing-2;

$color-input-size-small-padding: (($input-size-small-height - $color-preview-size-small) * 0.5)
  global.$spacing-2;

$color-input-size-medium-padding: (($input-size-medium-height - $color-preview-size-medium) * 0.5)
  global.$spacing-2;

$color-input-size-large-padding: (($input-size-large-height - $color-preview-size-large) * 0.5) 5px;

$color-input-bg-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));

$color-value-margin-left: global.$spacing-2;

$color-value-font-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));

$color-value-font-color_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));

$color-value-size-mini-font-size: global.$font-size-body-1;

$color-value-size-small-font-size: global.$font-size-body-3;

$color-value-size-medium-font-size: global.$font-size-body-3;

$color-value-size-large-font-size: global.$font-size-body-3;

$color-input-border-radius: global.$border-radius-small;

$color-preview-border-size: global.$border-1;

$color-preview-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));

$color-value-font-size: global.$font-weight-400;

$color-panel-width: 260px;

$color-panel-padding: global.$spacing-6;

$color-panel-border-radius: global.$border-radius-small;

$color-panel-bg-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-1'));

$color-panel-box-shadow: 0 8px 20px 0 rgb(0 0 0 / 10%);

$color-palette-height: 178px;

$color-palette-handle-size: global.$size-4;

$color-palette-handle-border-size: global.$border-2;

$color-control-bar-width: 182px;

$color-control-bar-height: 14px;

$color-control-bar-handle-size: global.$size-4;

$color-control-bar-alpha-margin-top: global.$spacing-6;

$color-control-bar-border-radius: 10px;

$color-panel-input-margin-top: global.$spacing-6;

$color-panel-input-group-margin-left: global.$spacing-6;

$color-panel-preview-size: 40px;

$color-panel-format-select-width: 58px;

$color-panel-section-title-font-size: global.$font-size-caption;

$color-panel-empty-font-size: global.$font-size-body-1;

$color-panel-block-size: global.$size-4;

$color-panel-block-margin: global.$spacing-3;

$color-panel-block-border-radius: global.$border-2;

$color-panel-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));