@surely-table-prefix-cls: ~'surely-table';
// -------- Colors -----------

@surely-base-primary: #1677ff;
@surely-background: #fff;
@surely-background-dark: #141414;
@white: #fff;
@black: #000;

:root {
  --@{surely-table-prefix-cls}-primary-color: @surely-base-primary;
  --@{surely-table-prefix-cls}-primary-color-1: color(
    ~`colorPalette('@{surely-base-primary}', 1) `
  );
  --@{surely-table-prefix-cls}-primary-color-2: color(
    ~`colorPalette('@{surely-base-primary}', 2) `
  );
  --@{surely-table-prefix-cls}-primary-color-3: color(
    ~`colorPalette('@{surely-base-primary}', 3) `
  );
  --@{surely-table-prefix-cls}-primary-color-4: color(
    ~`colorPalette('@{surely-base-primary}', 4) `
  );
  --@{surely-table-prefix-cls}-primary-color-5: color(
    ~`colorPalette('@{surely-base-primary}', 5) `
  );
  --@{surely-table-prefix-cls}-primary-color-6: @surely-base-primary;
  --@{surely-table-prefix-cls}-primary-color-7: color(
    ~`colorPalette('@{surely-base-primary}', 7) `
  );
  --@{surely-table-prefix-cls}-primary-color-8: color(
    ~`colorPalette('@{surely-base-primary}', 8) `
  );
  --@{surely-table-prefix-cls}-primary-color-9: color(
    ~`colorPalette('@{surely-base-primary}', 9) `
  );
  --@{surely-table-prefix-cls}-primary-color-10: color(
    ~`colorPalette('@{surely-base-primary}', 10) `
  );

  --@{surely-table-prefix-cls}-white: @white;
  --@{surely-table-prefix-cls}-black: #000;
  --@{surely-table-prefix-cls}-bg: @surely-background;
  --@{surely-table-prefix-cls}-row-bg: @surely-background;
  --@{surely-table-prefix-cls}-row-hover-bg: hsv(0, 0, 98%);
  --@{surely-table-prefix-cls}-row-insert-bg: #fff1f0;
  --@{surely-table-prefix-cls}-row-selected-bg: ~'var(--@{surely-table-prefix-cls}-primary-color-1)';
  --@{surely-table-prefix-cls}-row-selected-hover-bg: ~'var(--@{surely-table-prefix-cls}-primary-color-2)';
  --@{surely-table-prefix-cls}-expanded-row-bg: #fafafa;
  --@{surely-table-prefix-cls}-component-background: @surely-background;
  --@{surely-table-prefix-cls}-background-color: hsv(0, 0, 98%);
  --@{surely-table-prefix-cls}-background-color-selected: hsv(0, 0, 98%);
  --@{surely-table-prefix-cls}-background-color-summary: hsv(0, 0, 98%);

  --@{surely-table-prefix-cls}-header-drag-bg: darken(hsv(0, 0, 98%), 3%);
  --@{surely-table-prefix-cls}-header-sort-active-bg: darken(hsv(0, 0, 98%), 3%);
  --@{surely-table-prefix-cls}-header-filter-active-bg: rgba(0, 0, 0, 0.04);
  --@{surely-table-prefix-cls}-header-cell-split-color: rgba(0, 0, 0, 0.06);
  --@{surely-table-prefix-cls}-header-icon-color: rgba(0, 0, 0, 0.45);
  --@{surely-table-prefix-cls}-header-color: rgba(0, 0, 0, 0.85);
  --@{surely-table-prefix-cls}-header-icon-color-hover: rgba(0, 0, 0, 0.6);
  --@{surely-table-prefix-cls}-header-sort-bg: hsv(0, 0, 96%);

  --@{surely-table-prefix-cls}-body-sort-bg: #fafafa;
  --@{surely-table-prefix-cls}-border-color: hsv(0, 0, 92%);
  --@{surely-table-prefix-cls}-border-color-base: hsv(0, 0, 85%);
  --@{surely-table-prefix-cls}-cell-focus-border-color: @surely-base-primary;

  --@{surely-table-prefix-cls}-disabled-color: fade(#000, 25%);
  --@{surely-table-prefix-cls}-disabled-bg: hsv(0, 0, 96%);

  --@{surely-table-prefix-cls}-text-color: rgba(0, 0, 0, 0.85);
  --@{surely-table-prefix-cls}-text-color-secondary: rgba(0, 0, 0, 0.45);

  --@{surely-table-prefix-cls}-ping-box-shadow-color: rgba(5, 5, 5, 0.06);
  --@{surely-table-prefix-cls}-popup-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
  --@{surely-table-prefix-cls}-ghost-image-shadow-color: rgba(0, 0, 0, 0.15);
  --@{surely-table-prefix-cls}-box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

  --@{surely-table-prefix-cls}-tooltip-bg-color: rgba(0, 0, 0, 0.85);
}
[data-surely-table-theme='dark']:root {
  --@{surely-table-prefix-cls}-bg: @surely-background-dark;
  --@{surely-table-prefix-cls}-row-bg: @surely-background-dark;
  --@{surely-table-prefix-cls}-row-hover-bg: #262626;
  --@{surely-table-prefix-cls}-row-insert-bg: #434343;
  --@{surely-table-prefix-cls}-row-selected-bg: ~'var(--@{surely-table-prefix-cls}-primary-color-1)';
  --@{surely-table-prefix-cls}-row-selected-hover-bg: ~'var(--@{surely-table-prefix-cls}-primary-color-2)';
  --@{surely-table-prefix-cls}-expanded-row-bg: transparent;
  --@{surely-table-prefix-cls}-component-background: @surely-background-dark;
  --@{surely-table-prefix-cls}-background-color: #1d1d1d;
  --@{surely-table-prefix-cls}-background-color-selected: #1d1d1d;
  --@{surely-table-prefix-cls}-background-color-summary: #1d1d1d;

  --@{surely-table-prefix-cls}-text-color: fade(@white, 85%);
  --@{surely-table-prefix-cls}-text-color-secondary: fade(@white, 45%);

  --@{surely-table-prefix-cls}-disabled-color: fade(@white, 30%);
  --@{surely-table-prefix-cls}-disabled-bg: fade(@white, 8%);
  --@{surely-table-prefix-cls}-border-color-base: #434343;
  --@{surely-table-prefix-cls}-body-sort-bg: fade(@white, 1%);
  --@{surely-table-prefix-cls}-border-color: #303030;
  --@{surely-table-prefix-cls}-box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.48),
    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
  --@{surely-table-prefix-cls}-popup-shadow: ~'var(--@{surely-table-prefix-cls}-box-shadow-base)';
  --@{surely-table-prefix-cls}-ghost-image-shadow-color: ~'var(--@{surely-table-prefix-cls}-box-shadow-base)';
  --@{surely-table-prefix-cls}-ping-box-shadow-color: darken(rgba(0, 0, 0, 0.45), 5%);

  --@{surely-table-prefix-cls}-header-color: fade(@white, 85%);
  --@{surely-table-prefix-cls}-header-sort-bg: #262626;
  --@{surely-table-prefix-cls}-header-cell-split-color: fade(@white, 8%);
  --@{surely-table-prefix-cls}-header-filter-active-bg: #434343;
  --@{surely-table-prefix-cls}-header-sort-active-bg: #303030;
  --@{surely-table-prefix-cls}-header-icon-color: #bfbfbf;
  --@{surely-table-prefix-cls}-header-icon-color-hover: darken(#bfbfbf, 10%);
  --@{surely-table-prefix-cls}-header-drag-bg: #303030;
}

@font-variant-base: tabular-nums;
@line-height-base: 1.5715;
@font-feature-settings-base: 'tnum';
@table-font-size: 14px;
@table-font-size-md: 14px;
@table-font-size-sm: 12px;
@padding-xs: 8px; // small items
@padding-xss: 4px; // more small
@border-radius-base: 6px;
@table-padding-vertical: 16px;
@table-padding-horizontal: 16px;
@table-selection-column-width: 60px;

@table-border-style-base: solid; // style of a components border
@table-border-color: ~'var(--@{surely-table-prefix-cls}-border-color)'; // split border inside a component
@table-border-width-base: 1px; // width of the border for a component

@table-body-sort-bg: ~'var(--@{surely-table-prefix-cls}-body-sort-bg)';
@text-color: ~'var(--@{surely-table-prefix-cls}-text-color)';
@text-color-secondary: ~'var(--@{surely-table-prefix-cls}-text-color-secondary)';
@heading-color: @text-color;

@link-color: ~'var(--@{surely-table-prefix-cls}-primary-color)';
@link-hover-color: ~'var(--@{surely-table-prefix-cls}-primary-color-5)';
@link-active-color: ~'var(--@{surely-table-prefix-cls}-primary-color-7)';
@table-header-color: ~'var(--@{surely-table-prefix-cls}-header-color)';
@table-ping-box-shadow-color: ~'var(--@{surely-table-prefix-cls}-ping-box-shadow-color)';
@table-expanded-row-bg: ~'var(--@{surely-table-prefix-cls}-expanded-row-bg)';
@table-header-filter-active-bg: ~'var(--@{surely-table-prefix-cls}-header-filter-active-bg)';

@table-footer-color: @heading-color;
@table-border-radius-base: @border-radius-base;
@table-footer-bg: ~'var(--@{surely-table-prefix-cls}-background-color)';

@background-color-selected: ~'var(--@{surely-table-prefix-cls}-background-color-selected)';
@background-color-summary: ~'var(--@{surely-table-prefix-cls}-background-color-summary)';
@table-header-bg: ~'var(--@{surely-table-prefix-cls}-background-color)';
@table-header-sort-active-bg: ~'var(--@{surely-table-prefix-cls}-header-sort-active-bg)';
@table-header-cell-split-color: ~'var(--@{surely-table-prefix-cls}-header-cell-split-color)';
@table-row-hover-bg: ~'var(--@{surely-table-prefix-cls}-row-hover-bg)';

@table-border: @table-border-width-base @table-border-style-base @table-border-color;
@table-expand-icon-bg: ~'var(--@{surely-table-prefix-cls}-component-background)';
@table-header-sort-active-filter-bg: ~'var(--@{surely-table-prefix-cls}-header-sort-active-filter-bg)';
@table-filter-dropdown-bg: ~'var(--@{surely-table-prefix-cls}-component-background)';
@table-filter-btns-bg: inherit;
@table-row-insert-bg: ~'var(--@{surely-table-prefix-cls}-row-insert-bg)';
@table-selected-row-bg: ~'var(--@{surely-table-prefix-cls}-row-selected-bg)';
@table-selected-row-hover-bg: ~'var(--@{surely-table-prefix-cls}-row-selected-hover-bg)';
@box-shadow-base: ~'var(--@{surely-table-prefix-cls}-box-shadow-base)';
@border-color-base: ~'var(--@{surely-table-prefix-cls}-border-color-base)'; // base border outline a component

// animation
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);

// Checkbox
@surely-checkbox-size: 16px;
@surely-checkbox-color: ~'var(--@{surely-table-prefix-cls}-primary-color)';
@surely-checkbox-check-bg: ~'var(--@{surely-table-prefix-cls}-row-bg)';
@surely-checkbox-border-width: @table-border-width-base;
@surely-checkbox-border-radius: 4px;
@surely-checkbox-group-item-margin-right: 8px;
@surely-checkbox-prefix-cls: ~'@{surely-table-prefix-cls}-checkbox';
@surely-checkbox-inner-prefix-cls: ~'@{surely-checkbox-prefix-cls}-inner';

// Radio
@surely-radio-size: 16px;
@surely-radio-border-width: 1px;
@surely-radio-dot-size: @surely-radio-size - 8px;
@surely-radio-dot-color: ~'var(--@{surely-table-prefix-cls}-primary-color)';
@surely-radio-dot-disabled-color: ~'var(--@{surely-table-prefix-cls}-disabled-color)';
@surely-radio-solid-checked-color: ~'var(--@{surely-table-prefix-cls}-component-background)';
@surely-radio-prefix-cls: ~'@{surely-table-prefix-cls}-radio';
@surely-radio-inner-prefix-cls: ~'@{surely-radio-prefix-cls}-inner';
@surely-radio-duration: 0.3s;
@surely-radio-focus-shadow: 0 0 0 3px ~'var(--@{surely-table-prefix-cls}-primary-color-1)';
@surely-radio-button-focus-shadow: @surely-radio-focus-shadow;

// Tooltip
@surely-tooltip-prefix-cls: ~'@{surely-table-prefix-cls}-tooltip';