@use '../base/common/base-variables' as *;

/* ======== Headless Editor Styles ======== */
$he-font-family: $font-family !default;
$he-font-size: 14px !default;
$he-font-weight: 400 !default;
$he-line-height: 22px !default;
$he-font-size-bigger: 16px !default;
$he-font-weight-bigger: 400 !default;
$he-line-height-bigger: 24px !default;
$he-bg-color: $gray-base !default;
$he-color: $grey-light-font !default;

/* ======== Block level syles ======== */
$he-heading-padding: 5px 0 !default;
$he-heading-margin: 0 !default;
$he-block-placeholder-color: $grey-light-font !default;

/* ======== Collapsible Styles ======== */
$he-toggle-icon-height: 15px !default;
$he-toggle-icon-width: 15px !default;
$he-toggle-icon-height-bigger: 16px !default;
$he-toggle-icon-width-bigger: 16px !default;
$he-collapsible-header-gap: 8px !default;
$he-collapsible-header-gap-bigger: 12px !default;
$he-toggle-btn-hover: $grey-88 !default;
$he-toggle-btn-pressed: $grey-8c !default;

/* ======== Quote and Callout Block ======== */
$he-blockquote-left-width: 3px !default;
$he-blockquote-text-padding: 8px !default;
$he-blockquote-margin: 8px 0 !default;
$he-blockquote-left-width-bigger: 3px !default;
$he-blockquote-text-padding-bigger: 8px !default;
$he-blockquote-border-color: $grey-lighter !default;
$he-callout-border-radius: 4px !default;
$he-callout-icon-gap: 8px !default;
$he-callout-icon-padding-top: 13px !default;
$he-callout-icon-height: 16px !default;
$he-callout-icon-width: 16px !default;
$he-callout-padding: 12px !default;
$he-callout-padding-bigger: 16px !default;
$he-callout-icon-padding-top-bigger: 14px !default;
$he-callout-icon-height-bigger: 18px !default;
$he-callout-icon-width-bigger: 18px !default;
$he-callout-tip-text-color: $grey-light-font !default;
$he-callout-tip-bg-color: $grey-88 !default;
$he-callout-info-text-color: $msg-info-color !default;
$he-callout-info-bg-color: $msg-info-bg-color !default;
$he-callout-note-text-color: $brand-primary !default;
$he-callout-note-bg-color: rgba(0, 112, 240, 1) !default;
$he-callout-warning-text-color: $msg-warning-color !default;
$he-callout-warning-bg-color: $msg-warning-bg-color !default;
$he-callout-error-text-color: $msg-danger-color !default;
$he-callout-error-bg-color: $msg-danger-bg-color !default;
$he-callout-success-text-color: $msg-success-color !default;
$he-callout-success-bg-color: $msg-success-bg-color !default;

/* ======== Divider Block ======== */
$he-divider-border: 2px !default;
$he-divider-margin-block: 14px !default;
$he-divider-margin-block-bigger: 14px !default;
$he-divider-hover-bg-color: $grey-88 !default;
$he-divider-selected-bg-color: $brand-primary-lighten-30 !default;
$he-divider-border-color: $grey-lighter !default;

/* ======== Link syles ======== */
$he-link-anchor-color: $brand-primary !default;

/* ======== Inline content syles ======== */
$he-inline-code-font-size: 12px !default;
$he-inline-code-font-weight: 400 !default;
$he-inline-code-line-height: 18px !default;
$he-inline-code-padding: 2px 4px !default;
$he-inline-code-border-radius: 2px !default;
$he-inline-code-font-size-bigger: 14px !default;
$he-inline-code-line-height-bigger: 22px !default;
$he-inline-code-padding-bigger: 1px 4px !default;
$he-inline-code-bg-color: $gray-dark !default;
$he-inline-code-text-color: $brand-danger-font !default;

/* ======== Check Box syles ======== */
$he-checkbox-width: 18px !default;
$he-checkbox-height: 18px !default;
$he-checkbox-border-radius: 2px !default;
$he-checkbox-border: 1px !default;
$he-checkbox-width-bigger: 16px !default;
$he-checkbox-height-bigger: 16px !default;
$he-checkbox-border-bigger: 1px !default;
$he-checklist-padding-top: 5px !default;
$he-checklist-padding-right: 8px !default;
$he-checklist-padding-top-bigger: 6px !default;
$he-checklist-padding-right-bigger: 8px !default;
$he-checklist-marker-border-color: $grey-lighter !default;
$he-checklist-marker-checked-bg-color: $gray-base !default;
$he-checklist-marker-checked-border-color: $gray-base !default;

/* ======== Table syles ======== */
$he-block-table-padding: 12px 0 !default;
$he-table-block-border: 1px !default;
$he-table-heading-height: 36px !default;
$he-table-heading-padding: 7px !default;
$he-table-heading-font-weight: 700 !default;
$he-table-heading-font-size: 14px !default;
$he-table-heading-line-height: 22px !default;
$he-table-col-height: 36px !default;
$he-table-col-padding: 0 7px !default;
$he-table-col-font-weight: 400 !default;
$he-table-col-font-size: 14px !default;
$he-table-col-line-height: 22px !default;
$he-table-heading-height-bigger: 44px !default;
$he-table-heading-padding-bigger: 11px !default;
$he-table-heading-font-size-bigger: 16px !default;
$he-table-heading-line-height-bigger: 22px !default;
$he-table-col-height-bigger: 44px !default;
$he-table-col-padding-bigger: 0 11px !default;
$he-table-col-font-size-bigger: 14px !default;
$he-table-col-line-height-bigger: 22px !default;
$he-table-border-color: $grey-44 !default;
$he-table-header-row-bg-color: $grey-lighter !default;
$he-table-header-color: $grey-light-font !default;
$he-table-body-row-bg-color: $gray-base !default;
$he-table-body-color: $grey-light-font !default;
$he-cell-focus-outline: 1px !default;
$he-table-cell-focus-color: $brand-primary !default;
$he-table-cell-focus-shadow: unset !default;
$he-table-add-indicator-bg-color: $brand-primary !default;
$he-table-add-indicator-color: $brand-primary-font !default;
$he-table-hover-line-bg-color: $brand-primary !default;
$he-table-row-hover-bg-color: $gray-light !default;
$he-table-row-hover-color: $grey-light-font !default;
$he-table-row-focus-bg-color: $grey-44 !default;
$he-table-row-focus-color: $grey-light-font !default;
$he-table-cell-hover-border: $brand-primary !default;
$he-table-dot-bg-color: $grey-ad !default;
$he-table-gripper-border-radius: 4px !default;
$he-table-gripper-hover-bg: rgba($brand-primary, .3) !default;
$he-table-gripper-hover-color: $grey-f5 !default;
$he-table-row-selected-bg: $grey-44 !default;
$he-table-row-gripper-pressed-bg: $brand-primary !default;
$he-table-row-gripper-pressed-color: $brand-primary-font !default;
$he-table-col-selected-bg: $grey-44 !default;
$he-table-col-gripper-pressed-bg: $brand-primary !default;
$he-table-col-gripper-pressed-color: $brand-primary-font !default;
$he-table-row-col-selected-border: $brand-primary !default;
$he-table-insert-handle-border: $brand-primary !default;
$he-table-insert-handle-color: $brand-primary !default;
$he-table-row-col-hover-line: $brand-primary !default;
$he-table-row-col-insert-handle-size: 10px !default;
$he-table-row-col-insert-handle-line-height: 10px !default;
$he-table-row-col-action-handle-size-bigger: 14px !default;
$he-table-action-handle-line-height-bigger: 100% !default;
$he-table-icons-border-radius: 50% !default;
$he-table-gripper-action-popup-border-radius: 5px !default;
$he-table-gripper-action-popup-padding: 3px !default;
$he-table-insert-handle-bg: $gray-base !default;
$he-table-popup-icon-color: $grey-light-font !default;
$he-table-col-gripper-height: 20px !default;
$he-table-row-gripper-width: 36px !default;
$he-table-col-gripper-height-bigger: 28px !default;
$he-table-row-gripper-width-bigger: 44px !default;
$he-table-col-gripper-top: -4px !default;
$he-table-row-gripper-left: 14px !default;
$he-table-col-gripper-top-bigger: -12px !default;
$he-table-row-gripper-left-bigger: 6px !default;
$he-table-popup-icon-hover-bg: $gray-dark !default;
$he-table-popup-icon-hover-color: $grey-light-font !default;
$he-table-popup-icon-pressed-bg: $gray !default;
$he-table-popup-icon-pressed-color: $grey-light-font !default;
$he-table-popup-icon-size: 16px !default;
$he-table-popup-icon-size-bigger: 18px !default;
$he-table-popup-icon-padding: 8px !default;
$he-table-popup-icon-padding-bigger: 11px !default;

/* ======== Selection syles ======== */
$he-text-selection-bg-color: rgba(189, 220, 255, 1) !default;

/* ======== Heading syles ======== */
$he-h1-font-size: 36px !default;
$he-h1-font-weight: 500 !default;
$he-h1-line-height: 40px !default;
$he-h2-font-size: 30px !default;
$he-h2-font-weight: 500 !default;
$he-h2-line-height: 36px !default;
$he-h3-font-size: 24px !default;
$he-h3-font-weight: 500 !default;
$he-h3-line-height: 28px !default;
$he-h4-font-size: 20px !default;
$he-h4-font-weight: 500 !default;
$he-h4-line-height: 28px !default;
$he-h5-font-size: 16px !default;
$he-h5-font-weight: 500 !default;
$he-h5-line-height: 24px !default;
$he-h6-font-size: 14px !default;
$he-h6-font-weight: 500 !default;
$he-h6-line-height: 22px !default;

/* ======== Image Styles ======== */
$he-img-selected-outline-color: $brand-primary !default;

/* ======== Resize handle styles ======== */
$he-resizable-handle-bg-color: $brand-primary !default;
$he-resizable-handle-border-color: $gray-base !default;
$he-resizable-wrapper-outline-color: $brand-primary !default;

/* ======== Code Block Styles ======== */
$he-code-block-border-radius: 6px !default;
$he-code-block-container-border-width: 1px !default;
$he-code-block-container-border-color: $grey-lighter !default;
$he-code-block-container-bg-color: $gray-light !default;
$he-code-block-pre-margin: 0 !default;
$he-code-block-padding: 10px 24px !default;
$he-code-block-pre-border: 0 !default;
$he-code-block-pre-radius: 0 !default;
$he-code-block-bigger-pre-margin: 0 !default;
$he-code-block-bigger-padding: 24px !default;
$he-code-block-font-family: 'Roboto Mono', monospace !default;