// Extend bootstrap variables
@import "bootstrap-variables";

// Non-bootstrap variables
// Anything below this line should only be used by non-bootstrap code

$brand-secondary: #005a93;
$brand-secondary-hover: darken($brand-secondary, 2);
$brand-primary: #29abe2;
$brand-success: #3fa142;
$brand-danger: #d40404;

// Offical SilverStripe brand color
$color-brand: #43c7f4 !default;

// Generic colors
$color-notice:  #93CDE8 !default;
$color-warning: #E9D104 !default;
$color-error:   #e68288 !default;
$color-good:    #72c34b !default;

// Body colors
$body-color-dark: darken($body-color, 10);

// Extra state colors
$state-draft: #cf3f00; // State draft border
$state-draft-bg: #ff7f22;
$state-modified: $state-draft; // State modified border
$state-modified-bg: #fff7f0;
$state-archived: $gray-700;
$state-live: $green;

// Extra background colors
$body-bg-dark: darken($body-bg, 2);

// Extra border colors
$border-color-light: lighten($border-color, 4);
$border-color-dark: darken($border-color, 4);

// Extra spacers
$spacer-sm: $spacer * .75; // 12px
$spacer-xs: $spacer * .625; // 10px

// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-gutter-width-half: $grid-gutter-width / 2; // TODO: Deprecate this, replacing with $panel-padding-x and $panel-padding-y

// Panel padding
$panel-padding-x: $grid-gutter-width / 2;
$panel-padding-y: $grid-gutter-width / 2;

// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 13px;

// Custom size
$font-size-xs: .846rem; // 11px
$font-size-xxs: .75rem; // 10px

// Component
$component-active-bg-light: lighten($component-active-bg, 57%);
$component-active-border-color: $brand-primary;

// Custom table colors
$table-bg-tools: $gray-700;

// Buttons
//

$btn-spacing: 5px;
$btn-icon-spacing: 6px;
$btn-font-weight: normal;

$btn-primary-color: $white;
$btn-primary-bg: $brand-success;
$btn-primary-border: $btn-primary-bg;
$btn-primary-shadow: darken($btn-primary-bg, 6%);

$btn-secondary-color: $text-muted;
$btn-secondary-bg: darken($body-bg, 5);
$btn-secondary-border: $border-color-dark;

// Forms
$input-padding-y: .5385rem; // 7px
$input-max-width: 895px; // Approx max possible at small screen sizes

$input-padding-x-lg: 1.25rem;
$input-padding-y-lg: .75rem;

// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-popover: 1060;
$zindex-modal-bg: 1040;
$zindex-modal: 1050;
$zindex-cms-content-header: 60;
$zindex-cms-content-actions: 79;
$zindex-menu: $zindex-cms-content-actions + 1;


// SS toolbars
// Used for ui layout which contains main actions, secondary page action, top breadcrumbs and navigation bars.

$toolbar-height: 52px;
$toolbar-total-height: $toolbar-height + 1px; // Include border


// Navs
$nav-tabs-link-border-width: .15385rem;  // 2px just border bottom width
$nav-link-padding: $nav-link-padding-y $nav-link-padding-x #{$nav-link-padding-y - ($nav-tabs-link-border-width / 2)};


// List group

$list-group-link-color: $body-color;
$list-group-link-hover-color: $list-group-link-color;
$list-group-link-heading-color: $body-color;


// Panel sizes

$cms-panel-xs: 60px;
$cms-panel-sm: 300px;
$cms-panel-md: 448px;
$cms-panel-lg: 638px;


// Shadows

$shadow-level-1: rgba(0, 0, 0, .1);
$shadow-level-2: rgba(0, 0, 0, .15);
$shadow-level-3: rgba(0, 0, 0, .2);
$shadow-level-4: rgba(0, 0, 0, .25);
$shadow-level-5: rgba(0, 0, 0, .3);

// TODO tidy all shadows cms wide (including AssetAdmin)

$shadow-light: $shadow-level-3;
$shadow-lighter: $shadow-level-1;
$dropdown-shadow: 0 0 3px $shadow-level-3;
$gallery-item-shadow: 0 1px 4px $shadow-level-3;

// Gives items depth of different levels

$z-depth-1: 0 2px 5px 0 $shadow-level-1, 0 2px 10px 0 $shadow-level-1;
$z-depth-2: 0 8px 12px 0 $shadow-level-3, 0 6px 20px 0 $shadow-level-2;
$z-depth-3: 0 12px 20px 0 $shadow-level-4, 0 17px 40px 0 $shadow-level-3;
$z-depth-4: 0 16px 28px 0 $shadow-level-5, 0 25px 55px 0 $shadow-level-5;

// Menu theme colours

$base-menu: #d8e4eb !default;
$base-menu-bg: lighten($base-menu, 5%);
$base-menu-icon: darken($base-menu, 26%);

// Gallery thumbnail and image sizes

$gallery-thumb-width:   176px;
$gallery-thumb-height:  132px;

$gallery-item-width:    $gallery-thumb-width + 2; // include borders
$gallery-item-height:   174px;
$gallery-title-height:  40px;

$gallery-folder-height:	  54px;
$gallery-folder-title-height: $gallery-folder-height - 2;


// Preview panel screen sizes

$mobile-height: 568px;
$mobile-width: 320px;
$tablet-height: 1024px;
$tablet-width: 768px;
$desktop-height: 768px;
$desktop-width: 1366px;


// Search panel sizes

$search-width: 360px;
$search-width-lg: 500px;
$search-width-max: 100%;

// CMS menu

$cms-menu-width: $panel-padding-y * 9;
$cms-menu-width-collapsed: $cms-panel-xs;


// Custom speeds

$transition-speed-slow:   1s;
$transition-speed-mid:  .5s;
$transition-speed-fast:   .3s;


// line height to be based off the root height
$line-height-root: $line-height-base * 1rem;


// Toasts
$toast-max-width:                   250px;
$toast-padding-x:                   map_get($spacers, sm);
$toast-font-size:                   1rem;
$toast-color:                       $gray-700;
$toast-background-color:            #fff;
$toast-border-width:                0;
$toast-border-radius:               4px;
$toast-box-shadow:                  $z-depth-1;
