@import "./colors";
@import "./legacy-colors";

$spacing-base: 8px; // 8
$spacing-half: 0.5 * $spacing-base; // 4
$spacing-1: 1 * $spacing-base; // 8
$spacing-1-5: 1.5 * $spacing-base; // 12
$spacing-2: 2 * $spacing-base; // 16
$spacing-2-5: 2.5 * $spacing-base; // 20
$spacing-3: 3 * $spacing-base; // 24
$spacing-4: 4 * $spacing-base; // 32
$spacing-5: 5 * $spacing-base; // 40
$spacing-6: 6 * $spacing-base; // 48
$spacing-7: 7 * $spacing-base; // 56
$spacing-8: 8 * $spacing-base; // 64

$sizes: (
    "none": 0,
    "half": $spacing-half,
    "1": $spacing-1,
    "1-5": $spacing-1-5,
    "2": $spacing-2,
    "2-5": $spacing-2-5,
    "3": $spacing-3,
    "4": $spacing-4,
    "5": $spacing-5,
);

$border-radius-small: 2px;
$border-radius-base: 6px;

$font-family-sans-serif: "Open Sans", sans-serif;
$font-size-smallest: 12px;
$font-size-smaller: 13px;
$font-size-small: 14px;
$font-size-medium: 16px;
$font-size-large: 18px;

$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);

$slate-floating-button-size: 24px;
$slate-floating-button-margin: $spacing-1 * 1.5;
$slate-paragraph-line-height: 26px;

$story-composer-navigation-z-index: 10000;
$story-composer-sidebar-z-index: $story-composer-navigation-z-index + 1;

$toolbar-z-index: 300;
$toolbar-dark-theme-bg: #1b1b36;
$toolbar-dark-theme-border-color: rgba(#fff, 0.12);
$toolbar-dark-theme-border-radius: $border-radius-base;
$toolbar-dark-theme-text-color: $grey-300;
$toolbar-dark-theme-text-hover-color: #fff;
$toolbar-dark-theme-icon-color: $grey-300;
$toolbar-dark-theme-icon-hover-color: #fff;
$toolbar-dark-theme-icon-active-color: $color-dark-ui-accent;
$toolbar-dark-theme-hover-bg: #282842;
$toolbar-dark-theme-focus-outline: $indigo-200;

$editor-block-focus-color: $yellow-300;
$editor-block-spacing-vertical: $spacing-6;
$editor-block-border-radius: $border-radius-small;
$editor-block-outline-width: 6px;

$editor-heading-one-font-size: 28px;
$editor-heading-one-line-height: 34px;
$editor-heading-two-font-size: 22px;
$editor-heading-two-line-height: 28px;
$editor-paragraph-font-size: 16px;
$editor-paragraph-line-height: 22px;
$editor-text-color: $grey-700;
$editor-floating-button-size: 24px;
$editor-floating-button-margin: 12px;

$editor-block-overlay-z-index: 10;
$editor-floating-container-z-index: $editor-block-overlay-z-index + 1;
$editor-emoji-picker-z-index: 20000; // to beat the paragraph [+] button & placeholder

$editor-selection-bg: #c7d2fe;
$editor-selection-color: #3630a3;
$editor-highlighted-text-bg: #3c91ff3d;
$editor-highlighted-text-selection-bg: mix(
    rgba($editor-highlighted-text-bg, 1),
    $editor-selection-bg,
    alpha($editor-highlighted-text-bg) * 100%
);

$editor-bookmark-card-height: 180px;
$editor-coverage-card-height: $editor-bookmark-card-height;

$editor-link-color: #3c91ff;

$callout-block-background: #e8f2ff;
$callout-block-border-color: #8abdff;
$callout-block-border: 1px solid $callout-block-border-color;
$callout-block-border-radius: 4px;
$callout-block-text-color: $grey-800;
$callout-block-placeholder-color: $grey-500;