@import 'colors';
@import 'mixins';
@import 'icons';
@import 'buttons';


nav {
  position: fixed;
  background-color: $light_grey;
  width: 280px;
  height: 100%;
  overflow: auto;

  h1 {
    border-bottom: none;
    margin-bottom: 0px;
    padding-bottom: 0px;
  }

  h1.ctl-labs-logo a {
    background: asset-url('ctl_base_ui/ctl_labs_long_color.svg') 15px 15px no-repeat;
    @include background-size(240px, 56px);
    @include hide-text;
    width: 280px;
    height: 90px;
    display: block;
  }

  h1.ctl-labs-logo a:hover {
    background-color: #FFF;
    width: 275px;
    border-right: 5px solid $grey;
    transition: all 0.35s ease;
  }

  h4 {
    margin: 0px 0px 10px 0px;
    padding: 15px 15px;
    border-bottom: $grey 1px solid;
    font-size: 13px;
    font-weight: bold;
  }

  ul li a {
    font-size: 13px;
    display: block;
    padding: 5px 15px;
    color: $dark_grey;
    text-decoration: none;
  }

  ul li a:hover {
    color: $sky-blue;
    transition: all 0.35s ease;
    background-color: #FFF;
    border-right: 5px solid $sky-blue;
    padding-right: 10px;
  }
}

main {
  width: 960px;
  margin-left: 300px;

  h1 {
    padding-top: 1em;
  }
}

section {
  padding: 2em 0;
  border-bottom: $light_grey 1px solid;
  /* overflow: auto; */
  &:after {
    content: '';
    clear: both;
    display: block;
  }
}

section#about p {
  font-size: 18px;
  color: $medium_grey;
}

section h2:first-of-type {
  color: $sky-blue;
  font-weight: 100;
  letter-spacing: 2px;
  background-color: $light_grey;
  border-left: 5px solid $sky-blue;
  padding: 10px 10px 10px 15px;
}

h2 {
  font-size: 2em;
}

/* Section Specific styles */

/* CTL Identity */

.ctl-logo-base {
  height: 30px;
  width: 140px;
  margin: 0;
  padding: 0;
  @include hide-text;
  background: image-url('ctl_base_ui/ctl_logo_base.svg') no-repeat;
  @include background-size(140px, 30px);
  background-position: center left;
}

/* Colors */

.color-block {
  @include border-box;
  margin: 10px 0px;
  padding-left: 45px;
  position: relative;
  line-height: 35px;
  width: 310px;
  float: left;

  &:before {
    content: '';
    width: 35px;
    height: 35px;
    position: absolute;
    left: 0;
  }
}

.lipstick-red {
  @extend .color-block;

  &:before {
    background-color: $lipstick_red;
  }
}

.dark-red {
  @extend .color-block;

  &:before {
    background-color: $dark_red;
  }
}

.dark-blue {
  @extend .color-block;

  &:before {
    background-color: $dark_blue;
  }
}

.sky-blue {
  @extend .color-block;

  &:before {
    background-color: $blue_grey;
  }
}

.lime {
  @extend .color-block;

  &:before {
    background-color: $lime;
  }
}

.green {
  @extend .color-block;

  &:before {
    background-color: $green;
  }
}

.yellow {
  @extend .color-block;

  &:before {
    background-color: $yellow;
  }
}

.orange {
  @extend .color-block;

  &:before {
    background-color: $orange;
  }
}

.ctl-dark-green {
  @extend .color-block;

  &:before {
    background-color: $ctl_dark_green;
  }
}

.ctl-light-green {
  @extend .color-block;

  &:before {
    background-color: $ctl-light-green;
  }
}

.light-grey {
  @extend .color-block;

  &:before {
    background-color: $light_grey;
  }
}

.grey {
  @extend .color-block;

  &:before {
    background-color: $grey;
  }
}

.medium-grey {
  @extend .color-block;

  &:before {
    background-color: $medium_grey;
  }
}

.warm-grey {
  @extend .color-block;

  &:before {
    background-color: $warm_grey;
  }
}

.dark-grey {
  @extend .color-block;

  &:before {
    background-color: $dark_grey;
  }
}

/* Icons */

.icon {
  overflow: auto;
  line-height: 50px;
  border-bottom:1px solid #f1f1f1;
  margin:0px 0px 20px 0px;
}

.example-icon {
  @include border-box;
  float: left;
  position: relative;
  width: 20px;
  height: 40px;
  margin: 0 10px 15px 0;

  &:before {
    content: '';
    display: block;
    position: absolute;
    left: 5px;
    top: 0;
  }
  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 20px;
  }
}

@each $icon, $position in $icons {
  .icon-#{$icon}-example {
    @extend .example-icon;

    &:before {
      @extend .icon-#{$icon};
    }

    &:after {
      @extend .icon-#{$icon}-large;
    }
  }

  .icon-#{$icon}-green-example {
    @extend .example-icon;

    &:before {
      @extend .icon-#{$icon};
      @include icon-green;
    }

    &:after {
      @include icon-green;
      @extend .icon-#{$icon}-large;
    }
  }

  .icon-#{$icon}-blue-example {
    @extend .example-icon;

    &:before {
      @extend .icon-#{$icon};
      @include icon-blue;
    }

    &:after {
      @include icon-blue;
      @extend .icon-#{$icon}-large;
    }
  }

  .icon-#{$icon}-red-example {
    @extend .example-icon;

    &:before {
      @extend .icon-#{$icon};
      @include icon-red;
    }

    &:after {
      @include icon-red;
      @extend .icon-#{$icon}-large;
    }
  }

  .icon-#{$icon}-light-blue-example {
    @extend .example-icon;

    &:before {
      @extend .icon-#{$icon};
      @include icon-light-blue;
    }

    &:after {
      @include icon-light-blue;
      @extend .icon-#{$icon}-large;
    }
  }

  .icon-#{$icon}-light-green-example {
    @extend .example-icon;

    &:before {
      @extend .icon-#{$icon};
      @include icon-light-green;
    }

    &:after {
      @include icon-light-green;
      @extend .icon-#{$icon}-large;
    }
  }

  .icon-#{$icon}-light-grey-example {
    @extend .example-icon;

    &:before {
      @include icon-light-grey;
      @extend .icon-#{$icon};
    }

    &:after {
      @extend .icon-#{$icon}-large;
      @include icon-light-grey;
    }
  }

  .icon-#{$icon}-white-example {
    @extend .example-icon;

    &:before {
      background-color: $medium_grey;
      @include icon-white;
      @extend .icon-#{$icon};
    }

    &:after {
      background-color: $medium_grey;
      @extend .icon-#{$icon}-large;
      @include icon-white;
    }
  }
}

/* Buttons */

@each $icon, $position in $icons {
  .button-primary-with-icon-#{$icon} {
    @extend .button-primary;
    @extend .icon-#{$icon}-for-button;
    padding-left: 3em;
    margin-bottom: .5em;
  }
}

/* Modals */
#modals {
  position: relative;
  height: 400px;
}
.ui-dialog {
  position: relative;
  margin: 50px auto;
  height: 208px;
  .ui-dialog-content {
    height: 54px;
  }
}
.ui-widget-overlay.ui-front {
  position: absolute;
  top: 84px;
  height: 315px
}

select {
  min-width: 160px;
}

label {
  display: block;
}