@use postcss-simple-vars;
@use postcss-nested;

/*
  Variables
*/

$grid-gutter: 2rem;
$ui-gutter: 1rem;

$dashboard-background-colour: #efefef;
$dashboard-panel-colour: #fff;
$dashboard-sidebar-colour: #fff;
$dashboard-border-colour: #e0e0e0;
$dashboard-header-height: 6rem;
$dashboard-sidebar-width: 25rem;
$dashboard-sidebar-width--mini: 6rem;


/*
  Pen Setup
*/

html {
  box-sizing:border-box;
  font-size:62.5%;
}
*, *:before, *:after {
  box-sizing:inherit;
}

body {
  margin:0;
  font-family:sans-serif;
  font-size:1.6rem;
  line-height:1.5;
  color:#333;
  background-color:$dashboard-background-colour;
}

/*
  Layout
*/

.dashboard {
  
  &-wrapper {
    width:100%;
  }
  
  &-header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    
    width:100%;
    height:$dashboard-header-height;
    
    background-color:$dashboard-panel-colour;
    border-bottom:1px solid $dashboard-border-colour;
    
    .branding {
    
      a {
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:center;

        width:$dashboard-sidebar-width;
        padding:1rem;
        font-size:2.4rem;
        font-weight:500;
        border-right:1px solid $dashboard-border-colour;

        img {}

        span {
          margin-left:1rem;
        }
      }
    }

    nav {
      margin-left:auto;
      padding:1rem;
    }
  }
  
  &-body {
    position:relative;
    
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;

    min-height:calc(100vh - $dashboard-header-height);
    margin-top:$dashboard-header-height;
  }
  
  &-content {
    width:100%;
    min-height:calc(100vh - $dashboard-header-height);
  }
  
  &-sidebar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;

    width:$dashboard-sidebar-width;
    height:100%;
    padding-top:$dashboard-header-height;
    
    background-color:$dashboard-sidebar-colour;
    border-right:1px solid $dashboard-border-colour;

    &:not(.dashboard-sidebar--mini) {
      &[aria-hidden="false"] {
        left:0;

        & ~ .dashboard-content {
          margin-left:$dashboard-sidebar-width;
        }
      }

      &[aria-hidden="true"] {
        left:-$dashboard-sidebar-width;

        & ~ .dashboard-content {
          margin-left:0;
        }
      }
    }
    
    .component-menu {
      li {}
      a {
        
        span {}
      }

      /* First Level */
      > li {
        a {
          display:flex;
          align-items:center;
          
          span {
            display:inline-flex;
            align-items:center;
            height:$dashboard-sidebar-width--mini;
            padding:1rem;

            &:first-child {
              justify-content:center;
              width:$dashboard-sidebar-width--mini;

              color:#333;
            }

            &:last-child {
              flex:1;
              padding:1rem 1rem 1rem 2rem;

              color:#333;
            }
          }
        }
      }

      /* Children */
      li {
        li {
          a {}
        }
      }
    }

    /* Mini Sidebar */
    &--mini {
      width:$dashboard-sidebar-width--mini;
      
      & ~ .dashboard-content {
        margin-left:$dashboard-sidebar-width--mini;
      }

      .component-menu {
        li {}
        a {
          span {        
            &:last-child {}
          }
        }

        /* First Level */
        > li {
          a {
            

            span {
              

              &:first-child {
                
              }

              &:last-child {
                display:none;
                flex:none;
                width:0;
              }
            }
          }
        }
      }
    }
  }
}

/*
  Pages / Views
*/

.page {
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - $dashboard-header-height);
  
  &-header {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    
    background-color:$dashboard-panel-colour;
    border-bottom:1px solid $dashboard-border-colour;
  }
  
  &-title {
    flex:1;
    margin:$ui-gutter;
    font-size:2.8rem;
    font-weight:500;
  }
  
  &-search {
    margin:$ui-gutter;
    
    &[aria-hidden="false"] {
      display:block;
    }

    &[aria-hidden="true"] {
      display:none;
    }
  }
  
  &-actions {
    margin:$ui-gutter;
    
    &[aria-hidden="false"] {
      display:block;
    }

    &[aria-hidden="true"] {
      display:none;
    }
  }
  
  &-filters {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    
    width:100%;
    border-top:1px solid $dashboard-border-colour;
    
    &[aria-hidden="false"] {
      display:flex;
    }

    &[aria-hidden="true"] {
      display:none;
    }
    
    .page-filter {
      flex:1;
      margin:$ui-gutter;
      
      &__dropdown {
        &[aria-hidden="false"] {
          display:block;
        }

        &[aria-hidden="true"] {
          display:none;
        }
      }
    }
  }

  &-body {
    flex:1;
    padding:$ui-gutter;
  }
  
  &-footer {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    
    background-color:$dashboard-panel-colour;
    border-top:1px solid $dashboard-border-colour;
  }
}

/*
  Components
*/

.component-nav {
  ul {
    margin:0;
    padding:0;
    list-style:none;

    &[aria-hidden="false"] {
      display:block;
    }

    &[aria-hidden="true"] {
      display:none;
    }
  }
}

.component-menu {
  &--vertical {
    > li {
      display:block;
      width:100%;
    }
  }
  &--horizontal {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;

    > li {
      /* display:inline-block; */
      & ~ li {
        margin-left:1rem;
      }
    }
  }
  li {}
  a {
    text-decoration:none;
    outline:none;
  }
}

.component-image {
  display:block;
  
  &--circle {
    border-radius:50%;
  }
}

.component-list-item {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
}

/*
  UI Helpers
*/

.ui-scrollable {
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;

  /* WebKit browsers */
  &::-webkit-scrollbar {
    width:1rem;
    height:1rem;
  }
  &::-webkit-scrollbar-thumb {
    background:#aaa;
  }
  &::-webkit-scrollbar-track {
    background:transparent;
  }

  /* Internet Explorer */
  scrollbar-face-color:#aaa;
  scrollbar-track-color:transparent;
}

.ui-full-height {
  height:100%;
}