@forward "../shared/common";
@forward "../shared/colors";
@forward "../shared/fonts";
@forward "../shared/shadows";
@forward "../shared/spacing";
@forward "../shared/mixins";

@use "sass:math";
@use "../shared/common" as *;
@use "../shared/colors" as *;
@use "../shared/fonts" as *;
@use "../shared/shadows" as *;
@use "../shared/spacing" as *;
@use "../shared/mixins" as *;

$input-border-color-hover: $color-palette-primary;
$input-inset-shadow:
    inset 0 0 0 1px $color-palette-primary,
    inset 0 0 0 1px $color-palette-primary,
    inset 0 0 0 1px $color-palette-primary,
    inset 0 0 0 1px $color-palette-primary;
$input-border-color: $color-palette-gray-500;
$input-border-color-focus: $color-palette-gray-500;
$input-bg-color: $color-palette-gray-500;
$input-bg-color-hover: $color-palette-gray-500;

$bg-highlight: $color-palette-primary-op-10;
$text-color-highlight: $color-palette-primary;
$border-color-highlight: $color-palette-primary-op-10;

$focus-bg: $color-palette-primary-op-10;
$focus-text-color: $black;

$bg-hover: $color-palette-primary-100;
$text-color-hover: $black;
$border-color-hover: $color-palette-primary;

$button-text-color-disabled: $color-palette-gray-500;
$button-text-color: $color-palette-gray-500;
$button-shadow-focus: 0 0 0 4px $color-palette-secondary-op-20;

$warn: $orange;
$info: $color-palette-secondary;

// Basic stuffs
$field-tiny-height: 28px;
$field-disabled-opacity: 0.38;
$line-height: 1.5em;
$line-height-relative: 140%;

// ICONS
$md-icon-size-normal: 18px;
$md-icon-size-tiny: 14px;
$md-icon-size-big: 24px;
$md-icon-size-extra-big: 2rem;

// ANIMATION
$basic-speed: 150ms;

// LAYOUT
$toolbar-height: 4.375rem;
$toolbar-background: $white;
$toolbar-color: $black;
$navigation-item-height: 48px;
$navigation-width: 16.875rem;
$navigation-width-collased: 4.5rem;
$content-palette-width: 16rem;

//Dot Secondary Toolbar
$dot-secondary-toolbar-height: 3.25rem;
$dot-secondary-toolbar-main-height: 4.25rem;

// GRIDS
$gutter-width: $spacing-9;
$gutter-border: math.div($gutter-width, 2);

// Breakpoints min
$screen-sm-min: $screen-sm;
$screen-md-min: $screen-md;
$screen-lg-min: $screen-lg;
$screen-xl-min: $screen-xl;

// Breakpoints max
$screen-xs-max: $screen-sm-min - 1;
$screen-sm-max: $screen-md-min - 1;
$screen-md-max: $screen-lg-min - 1;
$screen-lg-max: $screen-xl-min - 1;
$screen-device-container-max: 1545px;

// FORMS
$label-color: $color-palette-black-op-60;
$label-font-size: $font-size-sm;
$form-field-spacing: $spacing-3;
$form-width: 400px;

// CONTENT TYPES
$content-type-field-height: 72px;
$dot-editor-size: 16px;

// CONFIRM POPUP
$confirm-popup-column-gap: 5px;

// CARDS
$card-min-height: 42px;

// Tag
$tag-radius-md: 7px;
