@import "../assets/styles/bootstrap/bootstrap";

#app {
  --theme-text: $text-color;
  --theme-background-light: $gray;
  --theme-background: $gray-dark;
  --theme-background-dark: $gray-darker;
  --theme-outline: $gray-lighter;
  --theme-outline-dark: $gray;
  --theme-action: $brand-primary;
  --theme-warning: $brand-warning;
  --theme-danger: $brand-danger;
  --theme-success: $brand-success;

  --theme-gray-base:    $gray-base;
  --theme-gray-darker:  $gray-darker;
  --theme-gray-dark:    $gray-dark;
  --theme-gray:         $gray;
  --theme-gray-light:   $gray-light;
  --theme-gray-lighter: $gray-lighter;
  --theme-gray-medium:  $gray-medium;
  --theme-gray-lighter-shadow: $gray-lighter-shadow;
  --theme-brand-primary: $brand-primary;
  --theme-brand-success: $brand-success;
  --theme-brand-info:    $brand-info;
  --theme-brand-warning: $brand-warning;
  --theme-brand-danger:  $brand-danger;

  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  background: $body-bg;
  color: var(--theme-text);
}

.scaffold {

    /** assumes a 'full-bleed' parent */
    height:100%;
    width:100%;
    display:flex;

    &.collapsed{
      .sidebar-wrapper{
        width: 60px;
        flex: 0 0 60px;
      }

      .collapse-icon{
        transform: translateX(44px);
        transition: transform cubic-bezier(0, 0.93, 0.31, 0.99) .1s .1s;
        background: $gray-dark;
      }

      .page {
        padding-left: 60px;
        transition: padding-left ease-in-out .05s 0s
      }
    }

    .collapse-icon{
      text-align: center;
      line-height: 67px;
      position: fixed;
      left: 0;
      height: 30px;
      width: 30px;
      line-height: 35px;
      color: white;
      transition: transform cubic-bezier(0.84, 0.01, 0.26, 0.98) .2s .1s, background-color ease-in-out .1s .3s;
      cursor: pointer;
      z-index: 102;
      transform: translateX(235px);
      border-radius: 20px;
      top: 15px;

      &:hover{
        background: $gray-dark;
        transition: transform cubic-bezier(0.84, 0.01, 0.26, 0.98) .2s .1s, background-color ease-in-out .1s;
      }

      i{
        font-size: 16px;
      }

    }
}

.sidebar-wrapper{
  width: $sidebar-wrapper;
  overflow: hidden;
  flex: 0 0 $sidebar-wrapper;
  display: flex;
  flex-direction: column;
  background: $theme-background;
  transition: flex ease-in-out .02s .1s;
  position: fixed;
  height: 100%;
  z-index: 101;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

  section{
    display: flex;
    &.content{
      flex: 1;
    }
    &.top{
      flex: 0 0 $sidebar;
      position: relative;
      height: $sidebar;
    }
  }

  .sidebar-top{
    background: $theme-secondary;
    flex-grow: 1;
    display: flex;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    text-decoration: none;
    flex: 0 0 280px;
    box-shadow: 0 2px 0px $gray-darker;
    z-index: 1000;
    transition: color ease-in-out .1s;

    &:hover{
      color: white;
    }

    .home{
      flex: 0 0 $sidebar;
      line-height: 70px;
      text-align: center;
      height: $sidebar;

      .material-icons{
        font-size: 15px;
        margin-top: -11px;
        vertical-align: middle;
      }
    }

    .project-title{
      flex: 1;
      display: table-cell;
      padding-left: 10px;

      .text{
        height: $sidebar;
        display: table-cell;
        vertical-align: middle;
      }
    }
  }
  
}

.scaffold .theme-action {
  background: $theme-action;
}

.scaffold .theme-warning {
  background: $theme-warning;
}

.scaffold .theme-danger {
  background: $theme-danger;
}

.scaffold .page .panel-body a{
  text-decoration: none;
  outline:0;

  &:hover, &:focus{
    //color: var(--theme-secondary);
  }
}


.scaffold .theme {

  /* fullbleed */
  display: flex;
  flex-grow:1;

}

.scaffold .page {

  /* fullbleed */
  overflow: auto;

  display: flex;
  flex-grow:1;
  padding-left: 280px;
  overflow-x: hidden;

}

.sidebar {
    width: $sidebar;
    background: var(--theme-background-dark);
    overflow: hidden;
    flex: 0 0 $sidebar;
    position: relative;
    z-index: 1;

    .sidebar-icon{
      border-left: 4px solid var(--theme-secondary);
    transform: translateX(-4px);
    transition: transform ease-in-out .1s;

      a {
        display: block;
        height: $sidebar;
        width: $sidebar;
        font-size: 25px;
        text-align: center;
        line-height: 62px;
        border-bottom: none;
        color: var(--theme-background-light);

        .material-icons{
          font-size: 20px;
        }

        span{
            transform: translateX(0px);
            transition: transform ease-in-out .15s;
            display: inline-block;
        }
      }
    }
}

.pageactive{
    .sidebar-icon{
        transform: translateX(0px);
        a {
            background: var(--theme-background);
            color: var(--theme-secondary);

            span{
                transform: translateX(-4px);
            }
        }
    }
}

.btn{
  padding: 8px 13px;
  line-height: 1.5;

    @extend .btn-default;

    .material-icons {
      font-size: 16px;
      vertical-align: middle;
      line-height: 15px;
      margin-top: -3px;
    }
}

.btn-xs {
  padding: 1px 5px;
  line-height: 1.5;
}

.btn-sm {
  padding: 5px 7px;
  line-height: 1.5;
}

.btn-action{
  @extend .btn-primary;
}

a.btn.disabled, fieldset[disabled] a.btn {
    pointer-events: inherit;
}

//GENERAL FORMS STYLES
.form-control{
  border: 2px solid $gray !important;
  font-weight: 400;

  &:focus{
    border-color: #0d1318 !important;
    box-shadow: none !important;
  }
}


.input-group-addon {
  color: $gray;
  border: 2px solid $gray;
  background-color: white;
}

label{
  font-weight: 100;
  font-size: 15px;
  margin-bottom: 10px;
}
//

//GENERAL BADGE STYLES
.badge{
  background-color: $gray;
}

.badge, .panel-default > .panel-heading .badge{
  font-size: 11px;
  font-weight: normal;
  margin-right: 2px;
  line-height: 1.1;
  padding: 2px 7px;

  &.badge-lg{
    font-size: 14px;
    text-transform: capitalize;
    font-weight: normal;
    border-radius: 20px;
    padding: 2px 11px;
    line-height: 1.1;
    vertical-align: middle;
  }

  &.strong{
    font-weight: bold;
  }

  &.bg-success{
    background-color: $brand-success;
  }

  &.bg-warning{
    background-color: $brand-warning;
  }

  &.bg-danger{
    background-color: $brand-danger;
  }

  &.bg-primary{
    background-color: $brand-primary;
  }
  &.bg-default{
    background-color: $gray !important;
  }
}

.list-group-item.active > .badge, .nav-pills > .active > a > .badge {
  &.bg-success{
    background-color: $brand-success;
  }

  &.bg-warning{
    background-color: $brand-warning;
  }

  &.bg-danger{
    background-color: $brand-danger;
    color: white;
  }

  &.bg-primary{
    background-color: $brand-primary;
  }
  &.bg-default{
    background-color: $gray !important;
  }
}
//

//GENERAL FLEX HELPER CLASSES
.flex{
  display: flex;

  &.column{
    flex-direction: column;
  }

  &.align-center{
    align-items: center
  }

  &.align-bottom{
    align-items: flex-end;
  }
}

//DROPDOWN MENU
.dropdown-menu{
  overflow: hidden;
  padding: 0;
  min-width: 120px;

  a[role="menuitem"]{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  i.material-icons {
    font-size: 14px;
    line-height: normal;
    vertical-align: middle;
  }

  .divider {
    margin: 0px 0;
    height: 2px;
  }

  & > li{
    & > a{
      padding: 5px 15px;

      i{
        margin-left: 5px;
      }
    }
  }
}

//button-toolbar
.button-toolbar{
  & > .btn, & > .btn-group{
    margin-left: 5px;
  }
}