// ==================================================================================
// Variables
// ==================================================================================
// Base colors
@blue                                       : #2eb2e4;
@blueLight                                  : #b5e4f6;

// Common colors
@border-color                               : #ddd;
@border-radius                              : 3px;

// Animation option
@animation-duration                         : 0.3s;

// Sidebar
@sidebar-bg                                 : #f0f0f0;
@sidebar-color                              : #666;
@sidebar-shadow-color                       : rgba(0, 0, 0, .15);

// Snippet
@snippet-bg                                 : #fff;
@snippet-border-color                       : #f0f0f0;
@snippet-border-color-hover                 : #ccc;
@snippet-placeholder-bg                     : #eee;

// Container
@container-outline-color-hover              : @blueLight;
@container-outline-color-selected           : @blue;

// Container toolbar
@container-toolbar-border-color              : #333;
@container-toolbar-button-bg                 : #333;
@container-toolbar-button-bg-hover           : @blue;
@container-toolbar-button-color              : #fff;

// Container content
@container-content-outline-color            : #e0e0e0;
@container-content-outline-highlighted      : @blue;

// Container content toolbar
@container-content-toolbar-bg               : rgba(0, 0, 0, .5);
@container-content-toolbar-button-color     : #fff;
@container-content-toolbar-button-bg-hover  : rgba(255, 255, 255, .2);
@container-content-toolbar-outline-color    : rgba(0, 0, 0, .5);
