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

$calendar-prefix-cls: string.unquote('#{global.$prefix}-calendar');
$calendar-css-prefix: string.unquote('--#{global.$prefix}-calendar');

.#{$calendar-prefix-cls}--default-theme,
[class$='-calendar--default-theme'] {
  #{$calendar-css-prefix}-primary-color: #{global.$color-primary-6};
  #{$calendar-css-prefix}-primary-sub-color: #{global.$color-primary-5};
  #{$calendar-css-prefix}-primary-extra-color: #{global.$color-primary-4};
  #{$calendar-css-prefix}-secondary-color: var(
    string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2')
  );
  #{$calendar-css-prefix}-base-color: var(
    string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
  );
  #{$calendar-css-prefix}-contrast-color: var(
    string.unquote('#{global.$sd-cssvars-prefix}-color-white')
  );
  #{$calendar-css-prefix}-border-color: var(
    string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
  );
  #{$calendar-css-prefix}-header-color: var(
    string.unquote('#{global.$sd-cssvars-prefix}-color-white')
  );
  #{$calendar-css-prefix}-event-color: var(
    string.unquote('#{global.$sd-cssvars-prefix}-color-white')
  );
  #{$calendar-css-prefix}-event-border-color: color-mix(
    in srgb,
    var(#{$calendar-css-prefix}-base-color) 12%,
    transparent
  );
  #{$calendar-css-prefix}-border-radius: #{global.$radius-medium};
  #{$calendar-css-prefix}-height: 500px;
  #{$calendar-css-prefix}-min-cell-size: 1rem;

  &.#{$calendar-prefix-cls}--dark,
  &[class*='-calendar--dark'],
  [sd-theme='dark'] & {
    #{$calendar-css-prefix}-primary-color: color-mix(
      in srgb,
      #{global.$color-primary-6} 78%,
      #0f172a
    );
    #{$calendar-css-prefix}-secondary-color: var(
      string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
    );
    #{$calendar-css-prefix}-base-color: var(
      string.unquote('#{global.$sd-cssvars-prefix}-color-white')
    );
    #{$calendar-css-prefix}-contrast-color: var(
      string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
    );
    #{$calendar-css-prefix}-border-color: color-mix(
      in srgb,
      var(#{$calendar-css-prefix}-base-color) 16%,
      transparent
    );
    #{$calendar-css-prefix}-header-color: var(#{$calendar-css-prefix}-base-color);
    #{$calendar-css-prefix}-event-color: var(#{$calendar-css-prefix}-base-color);
    #{$calendar-css-prefix}-event-border-color: color-mix(
      in srgb,
      var(#{$calendar-css-prefix}-base-color) 40%,
      transparent
    );
  }
}