// ---------------------------------
// CONFIG

@config-primary-color:             #4EA1CA;
@config-secondary-color:           #4EA1CA;
@config-dark-mode:                 false;
@config-colored-header:            false;

// ---------------------------------
// COLORS

@primary-hue:                      hue(@primary-color);
@primary-sat:                      saturation(@primary-color);

@secondary-hue:                    hue(@secondary-color);
@secondary-sat:                    saturation(@secondary-color);

// Derive the primary/secondary colors from the config variables. In dark mode,
// we make the user-set colors a bit darker, otherwise they will stand out too
// much.
.define-colors(@config-dark-mode);
.define-colors(false) {
  @primary-color:                  @config-primary-color;
  @secondary-color:                @config-secondary-color;

  @body-bg:                        #fff;
  @text-color:                     #111;
  @link-color:                     saturate(@primary-color, 10%);
  @heading-color:                  @text-color;
  @muted-color:                    hsl(@secondary-hue, min(20%, @secondary-sat), 50%);
  @muted-more-color:               #aaa;
  @shadow-color:                   rgba(0, 0, 0, 0.35);

  @control-bg:                     #F2F3F3;
  @control-color:                  @muted-color;
  @control-danger-bg:              #fdd;
  @control-danger-color:           #d66;

  @overlay-bg:                     fade(@secondary-color, 90%);

  @code-bg:                        darken(@body-bg, 3%);
  @code-color:                     lighten(@text-color, 30%);
}
.define-colors(true) {
  @primary-color:                  @config-primary-color;
  @secondary-color:                @config-secondary-color;

  @body-bg:                        hsl(@secondary-hue, min(20%, @secondary-sat), 10%);
  @text-color:                     #ddd;
  @link-color:                     saturate(@primary-color, 10%);
  @heading-color:                  @text-color;
  @muted-color:                    hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
  @muted-more-color:               hsl(@secondary-hue, min(10%, @secondary-sat), 40%);
  @shadow-color:                   rgba(0, 0, 0, 0.5);

  @control-bg:                     #F2F3F3;
  @control-color:                  @muted-color;
  @control-danger-bg:              #411;
  @control-danger-color:           #a88;

  @overlay-bg:                     fade(darken(@body-bg, 5%), 90%);

  @code-bg:                        darken(@body-bg, 3%);
  @code-color:                     #fff;
}

@hero-bg:                          @control-bg;
@hero-color:                       @control-color;
@hero-muted-color:                 @control-color;

@alert-bg:                         #fff2ae;
@alert-color:                      #ad6c00;

@alert-error-bg:                   #d83e3e;
@alert-error-color:                #fff;

@alert-success-bg:                 #B4F1AF;
@alert-success-color:              #33722D;

.define-header(@config-colored-header);
.define-header(false) {
  @header-bg:                      #4FA4CE;
  @header-color:                   @body-bg;
  @header-control-bg:              hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
  @header-control-color:           #000;
}
.define-header(true) {
  @header-bg:                      #4FA4CE;
  @header-color:                   @body-bg;
  @header-control-bg:              hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
  @header-control-color:           @control-bg;
}

// ---------------------------------
// LAYOUT

@drawer-width:                     270px;
@pane-width:                       400px;
@header-height:                    66px;
@header-height-phone:              46px;

@border-radius:                    0px;

@zindex-header:                    1000;
@zindex-pane:                      1010;
@zindex-composer:                  1020;
@zindex-dropdown:                  1030;
@zindex-modal-background:          1040;
@zindex-modal:                     1050;
@zindex-alerts:                    1060;
@zindex-tooltip:                   1070;

// ---------------------------------
// BREAKPOINTS

@screen-phone-max:                 (@screen-tablet - 1);

@screen-tablet:                    768px;
@screen-tablet-max:                (@screen-desktop - 1);

@screen-desktop:                   992px;
@screen-desktop-max:               (@screen-desktop-hd - 1);

@screen-desktop-hd:                1100px;

@phone:                            ~"(max-width: @{screen-phone-max})";
@tablet:                           ~"(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})";
@desktop:                          ~"(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})";
@desktop-hd:                       ~"(min-width: @{screen-desktop-hd})";

@tablet-up:                        ~"(min-width: @{screen-tablet})";
@desktop-up:                       ~"(min-width: @{screen-desktop})";

// ---------------------------------
// COMPONENTS

@tooltip-bg:                       rgba(0, 0, 0, 0.9);
@tooltip-color:                    #fff;

@online-user-circle-color:         #7FBA00;

// ---- end vars --- start mixinis

.header-background() {
  box-shadow: 0px 0px 25px rgba(0,0,0,0.5);
}

// --------

.Button {
  text-transform: uppercase;
  font-weight: 300;
}
.Header-title {
  padding: 0px;
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  text-align: center;

  > img {
    min-width: 200px;
    height: auto;
  }
  .Header-logo {
    max-height: none;
    vertical-align: middle;
  }
}
.Header-navigation {
  float: left;
  margin-right: 25px;
  margin-top: 8px;
}
.Header-controls {
  margin: 4px;
  padding: 0;
  list-style: none;
}
li.TagTile.bgImg {
  color: #fff !important;
  background-position: center center;
  background-size: cover;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
  > a {
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    > h3 {
    color: #fff;
    }
    .TagTile-children a {
      color: #fff;
      display: block;
    }
  }
}
li.TagTile.bgImg.photography {
  background-image: url('https://dt9ph4xofvj87.cloudfront.net/user/sites/shawacademy.com/themes/mytheme/images/courses/photography/slider-card.png');
}
li.TagTile.bgImg.marketing {
  background-image: url('https://dt9ph4xofvj87.cloudfront.net/user/sites/shawacademy.com/themes/mytheme/images/courses/marketing/slider-card.png');
}
li.TagTile.bgImg.nutrition {
  background-image: url('https://dt9ph4xofvj87.cloudfront.net/user/sites/shawacademy.com/themes/mytheme/images/courses/nutrition/slider-card.png');
}
body .SessionDropdown .Dropdown-toggle {
  border-radius: 18px;

  .Avatar {
    margin: -8px -15px -5px 10px;
    .Avatar--size(43px);
  }
  .Button-label .username {
    margin-top: 5px;
    display: inline-block;
  }
}
.viewNavInline {
  .listInline {
    padding: 0px;
    list-style: none;
    > li {
      display: inline-block;
      margin: 0px 5px 5px 0px;
    }
  }
}