// Common css variables
$button-color:              var(--button-color);
$button-hover-color:        var(--button-hover-color);
$text-on-light:             var(--text-on-light); // the orange colors for SMBs
$text-on-button:            var(--text-on-button);
$text-on-dark:              var(--text-on-dark);

//COLORS THEME
$duda-orange:               #f66035;
$duda-orange-hover:         #f86f4c;
$link:                      #226eaf;
$duda-background-color:     #f7f7f7;

//grays - sorted by brightness
$font-light:                #ffffff;
$light-gray:                #f2f2f2;
$disabled-bg:               #e9eeef;
$light-border:              #e8e8e8;
$dark-border:               #dde4e7;
$mid-dark-gray:             #d2d2d2;
$duda-gray:                 #ced6d9;
$darker-gray:               #bfbfbf;
$text-dark-gray:            #a1abb0;
$font-light-gray:           #8a8a8a;
$clickable-item:            #617379;
$clickable-item-hover:      #6b7f85;
$grayer-gray:               #526065;
$background-topbar-hover:   #394347;
$bg-gray:                   #374043;
$dark-gray:                 #313131;
$theme-dark:                #2f373a;
$background-top-toolbar:    #2b3235;
$active-gray:               #292f32;
$seperator-dark:            #000000;
$pale-grey:                 #fafafb;
$header-table:              #617379;
$header-background:         #f5f7f7;

$dark-toolbar: #2a2a2a;
$dark-toolbar-item-active: #55565a;
$dark-toolbar-text: #c4c4c4;
$dark-toolbar-text-active: #ffffff;
$dark-toolbar-bright-item-active: #ebecf0;
$dark-toolbar-bright-text: #2f373a;

$font-dark-gray:            $dark-gray;

$red-error:                 #e7463a;
$deep-red: #d0021b;
$pink-background:           #fff0e4;
$pink-stroke:               #f0e1d5;
$duda-green:                #3AC280;
$duda-green-light:           #3fcf89;
$duda-yellow:               #e8c72e;
$duda-blue: #0091ff;
$duda-destructive: #d30000;
$duda-destructive-light: #de2727;

$shadow-color: rgba(64, 65, 71, 0.3);

//BOX SHADOWS THEME
$default-box-shadow:            1px 1px 2px 0 rgba(75, 75, 85, 0.2);
$default-disabled-box-shadow:   1px 1px 2px 0 rgba(75, 75, 85, 0.4);
$default-inset-box-shadow:      inset 1px 1px 3px rgba(0, 0, 0, 0.15);
$tooltips-box-shadow:			1px 1px 1px 0px rgba(64, 65, 71, 0.3);
$top-window-box-shadow:         -2px 3px 12px -1px rgba(100, 100, 100, 0.3);
$popups-box-shadow: 			1px 1px 6px rgba(0, 0, 0, 0.3);
$contentmenu-box-shadow:        4px 4px 8px 0px rgba(64, 65, 71, 0.28);

// RTL BOX SHADOWS
$default-box-shadow-rtl: -1px 1px 2px 0 rgba(75, 75, 85, 0.2);
$default-disabled-box-shadow-rtl: -1px 1px 2px 0 rgba(75, 75, 85, 0.4);
$default-inset-box-shadow-rtl: -inset 1px 1px 3px rgba(0, 0, 0, 0.15);
$tooltips-box-shadow-rtl: -1px 1px 1px 0px $shadow-color;
$top-window-box-shadow-rtl: --2px 3px 12px -1px rgba(100, 100, 100, 0.3);
$popups-box-shadow-rtl: -1px 1px 6px rgba(0, 0, 0, 0.3);
$contentmenu-box-shadow-rtl: -4px 4px 8px 0px rgba(64, 65, 71, 0.28);

$top-bar-items-depths: base, buttons, banners;

// SPACING
$base-spacing: 8px;

$default-border-radius: 3px;
$floating-elements-radius: 6px;

$default-border: 1px solid $duda-gray;

$widget-width: 344px;
$widget-width-mid-size: 449px;
$widget-width-large-size: 616px;
$widget-double-width: 2*$widget-width;
$widget-width-xl-size: 963px;
$widget-height: 536px;

$default-widget-padding: 31px;

$container-width-regular-size: $widget-width - $default-widget-padding;
$container-width-large-size: $widget-width-large-size - $default-widget-padding;
$container-width-double-size: $widget-double-width - $default-widget-padding;

$left-panel-inner-width: 302px;

// FONTS
// Here we are taking the font family from CSS variables, with a fallback to what they were
$duda-title-font: var(--d-title-font, "Roboto");
$duda-font: var(--d-font, "Source Sans Pro", sans-serif);

$settings-panel-large: 617px;

$editor-left-panel-width: 98px;

$top-bar-height: 50px;

// for tablet portrait
$tablet-editing-breakpoint: 1000px;
$zoom-coefficient: 1.5;
$landscape-media-query: 'screen and (min-width: $tablet-editing-breakpoint), screen and (orientation: landscape)';
$left-panel-width: 800px;
$left-panel-list-width: 270px;
$left-panel-right-width: $left-panel-width - $left-panel-list-width - 50px;

// duda-go
$default-padding: 24px;
$default-widget-padding-top: 16px;
$default-mobile-shadow: 0 -2px 12px 0 rgba(47, 55, 58, 0.5);
$default-mobile-shadow-top: 0 2px 12px 0 rgba(47, 55, 58, 0.5);
$input-border-bottom: 1px solid $dark-gray;
$mobile-popups-box-shadow: 1px 1px 21px rgba(0, 0, 0, 0.3);
$default-panels-border-radius: 9px;

// MIXINS
@mixin rotate($deg: 90deg) {
  -webkit-transform: rotate($deg);
  -moz-transform: rotate($deg);
  -ms-transform: rotate($deg);
  -o-transform: rotate($deg);
  transform: rotate($deg);
}

@mixin transition($length: 1s, $delay: 0s, $easing: ease, $properties: all) {
  transition: $length $easing $delay $properties;
}

:export {
  dudaFont: $duda-font;
  dudaGray: $duda-gray;
  lightBorder: $light-border;
}