@import "./style-params.less";
@import "./mixins.less";
@import "./text.less";


@font-family: @font-desktop-body-regular-dark-font-family;

// Breakpoints
@screen-extra-large: ~ "only screen and (min-width: 1920px)";
//@screen-large: ~"only screen and (min-width: 1440px) and (max-width: 1920px)";
//@screen-medium: ~"only screen and (min-width: 960px) and (max-width: 1440px)";
@screen-large: ~"only screen and (min-width: 961px)";
@screen-medium: ~"only screen and (min-width: 787px) and (max-width: 960px)";
@screen-mobile-all: ~"only screen and (max-width: 960px)";
@screen-mobile: ~"only screen and (max-width: 768px)";
@screen-small: ~"only screen and (max-width: 786px)";

// Core vertical unit. Heights, vertical margins, paddings, etc... must be
// multiple of this value
@vu: 4px;

// Layout
@main-max-width: 1680px;
@main-min-width: 320px;
@main-min-height: 600px;
@hide-sidebar: ~"only screen and (max-width: 1280px)";
@show-sidebar: ~"only screen and (min-width: 1281px)";

// Grid
@ncol: 12;  // number of columns
@ncol-small: 4;

@spacing-extra-large: 40px;
@spacing-large: 28px;  // space on the sides and between columns
@spacing-medium: 28px;
@spacing-small: 12px;

// Z-indexes
@z-index-sidebar: 9000;
@z-index-max: 100;
@z-index-dropdown-content: @z-index-max;
@z-index-dropdown: @z-index-dropdown-content - 1;
@z-index-dropdown-backdrop: @z-index-dropdown - 1;
@z-index-full-screen-modal: @z-index-dropdown - 1;
@z-index-help-content: @z-index-max;
@z-index-help: @z-index-help-content -1;


// Components
// Card (list item)
@card-shadow: 0 1px 1px 0 rgba(91,99,156,0.26);
@card-br: 2px;
@card-padding: @vu * 5 24px; // 22px 24px

// Button
@mobile-button-padding-size: 18px;
@mobile-button-line-height: 20px;
@mobile-button-font-size: 20px;

// Sidebar
@sidebar-width: 243px;
@sidebar-height: 100%;
@sidebar-shadow: 1px 0 2px 0 rgba(0,0,0,0.06);
@sidebar-item-height: @vu * 16;  // 64px
@sidebar-item-padding: @vu * 4;  // 16px
@sidebar-item-shadow: inset 0 -1px 0 0 @color-gray-100;

// Tabs
@tabs-component-margin-bottom: 20px;

// App Header
@app-header-height: @vu * 16;  // 64px
@app-header-title-padding: @vu * 5 24px;   // 20px 24px

// Menu
@app-menu-padding: 16px 39px 16px 16px;
@app-menu-spacing: 16px;
@app-menu-divider-height: 1px;

// Phone Number Input
@app-input-margin: 5px;
@app-last-item-border: 1px solid @color-gray-300;
@selection-font-size: 0.8em;
@tel-input-radius: 3px;
@tel-input-border: 1px solid @color-gray-300;
@input-border-radius: 0 2px 2px 0;
@phone-input-padding: 5px;
@drop-panel-max-height: 200px;
@drop-menu-max-height: 300px;
@drop-panel-width: 300px;
@drop-panel-border: 1px solid @color-gray-300;
@dropdown-item-padding: 4px 15px;
@label-height: 16px;
@label-margin-bottom: 4px;

//Badge
@badge-padding: 9px 12px;
@badge-icon-margin: 5px;
@badge-br: 20px;

// FileUpload
@file-upload-panel-height: 91px;
@file-upload-title-size: 14px;
@file-upload-title-weight: 500;
@fle-upload-line-height: 20px;
@file-upload-title-margin-top: 4px;

// Collapser
@collapser-body-padding: 24px;
@collapser-margin-bottom: 12px;

// Step
@stepper-step-margin-bottom: 20px;

//TextArea
@textarea-textarea-padding: 5px;
@textarea-label-margin-bottom: 5px;

// Dashboard
@dashbaord-header-padding: 12px 26px;
@dashboard-mobile-header-padding: 6px 0;
@dashboard-main-margin-bottom: 50px;
@dashboard-alert-border-radius: 3px;

// Datepicker
@datepicker-shadow: 0 2px 16px 0 rgba(153,155,168,0.12);

// Dropdown
@dropdown-shadow: 2px 2px 16px 0 rgba(153, 155, 168, 0.12);

//Placeholder
@form-placeholder-color: rgb(117, 117, 117);