@use "@angular/material" as mat;
@import "@angular/material/theming";

html,
body {
  margin: 0;
  height: var(--app-height, 100vh);
  overflow: hidden;
}

.nav {
  &__section-title {
    display: block;
    width: 231px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.25px; //? em ?
    line-height: 1.666666667;
    padding-left: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 24px;
    margin-bottom: 16px;
  }

  &__section-seperator {
    display: none;
    border: 0;
    height: 1px;
    margin-top: 32px;
    margin-bottom: 27px; // calc(1.75rem - 1px);

    &--first {
      visibility: hidden;
    }
  }

  &__list {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    flex-grow: 1;
    flex-direction: column;
  }

  &__leading-icon {
    flex: 0 0 24px;
  }

  &__trailing-icon {
    flex: 0 0 18px;
    display: none;
    margin-left: auto;
    transition: transform $shell-transition-duration;
  }

  &__link {
    display: flex;
    align-items: center;
    padding: 12px 8px 12px 24px;
    flex-grow: 1;
    text-decoration: none;
    transition: padding-left $shell-transition-duration $ease-in-out-curve-function;
    cursor: pointer;
  }

  &__link:hover {
    text-decoration: none;
  }

  &__list-item {
    display: flex;
    flex-wrap: wrap;
    width: calc(#{$sidebar-wide-width} - 1px);
  }

  &__link-title {
    padding: 0 16px 1px 16px;
    width: $nav-link-title-default-width;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // Spacing for sublists when Sidebar is wide + fixed width for truncated text
  &__list--lvl-1 {
    .nav__link {
      padding-left: calc(#{$sublist-offset} + 24px); // offset value + default padding left
    }

    .nav__link-title {
      width: $nav-link-title-lvl-1-width; // calc(206px - #{$sublist-offset});
    }
  }

  &__list--lvl-2 {
    .nav__link {
      padding-left: calc((#{$sublist-offset} * 2) + 24px); // double offset value + default padding left
    }

    .nav__link-title {
      width: $nav-link-title-lvl-2-width; // calc(206px - (#{$sublist-offset} * 2));
    }
  }

  &__list--lvl-3 {
    .nav__link {
      padding-left: calc((#{$sublist-offset} * 3) + 24px); // tripple offset value + default padding left
    }

    .nav__link-title {
      width: $nav-link-title-lvl-3-width; // calc(206px - (#{$sublist-offset} * 3));
    }
  }

  // Sublist nav items coloring
  &__list-item--expanded {
    // background: map-get($mat-grey, 50);

    .nav__link--expanded {
      .nav__trailing-icon {
        transform: rotate(90deg);
        transition: transform $shell-transition-duration;
      }
    }
  }

  // Sublists initialy hidden
  &__list--lvl-1,
  &__list--lvl-2,
  &__list--lvl-3 {
    display: none;
  }

  // Revealing sublists
  &__list--lvl-1.nav__list--expanded,
  &__list--lvl-2.nav__list--expanded,
  &__list--lvl-3.nav__list--expanded {
    display: flex;
  }
}

.layout__wrapper {
  position: relative;
  width: 100vw;
  height: 100%;

  &.--shell-hidden {
    //? remove the shell

    .btn__mobile-nav {
      display: none;
    }
    
    .layout {
      &__sidebar,
      &__header {
        display: none;
      }

      &__content-wrapper {
        padding-top: 0;
        margin-top: 0;
        height: var(--app-height, 100vh);
      }

      &__main {
        margin-left: 0;
      }
    }
  }
}

.layout {
  &__sidebar {
    width: 0;
    height: var(--app-height, 100vh);
    position: fixed;
    left: 0;
    top: 0;
    border-right: 1px solid;
    box-shadow: none;
    transition: width $shell-transition-duration $ease-in-out-curve-function,
      border 0s linear $shell-transition-duration, shadow $shell-transition-duration $ease-in-out-curve-function;
    z-index: 1000;

    @media screen and (min-width: 600px) {
      width: $sidebar-condensed-width;
    }
  }

  &__main {
    overflow: hidden;
    // min-height: var(--app-height, 100vh);

    @media screen and (min-width: 600px) {
      margin-left: $sidebar-condensed-width;
      transition: margin-left $shell-transition-duration $ease-in-out-curve-function;
    }
  }

  &__header {
    position: fixed;
    z-index: 800;
    width: 100%;
    top: 0;

    @media screen and (min-width: 600px) {
      width: calc(100% - #{$sidebar-condensed-width});
      @include mat.elevation-transition;
      @include mat.elevation(6, black, 0.6);
    }
  }

  &__content-wrapper {
    overflow-y: auto;
    height: calc(var(--app-height, 100vh) - #{$actionbar-height});
    padding-top: calc(#{$mini-fab-size} + #{$content-padding});
    margin-bottom: $actionbar-height;

    @media screen and (min-width: 600px) {
      padding-top: 0;
      margin-bottom: 0;
      height: calc(var(--app-height, 100vh) - #{$header-height});
      margin-top: $header-height;
    }
  }

  &__content {
    padding: $content-padding;
  }

  &__topbar {
    display: none;

    @media screen and (min-width: 600px) {
      display: flex;
      height: $topbar-height;
      border-bottom: 1px solid;
    }
  }

  &__actionbar {
    position: fixed;
    bottom: 0;
    height: $actionbar-height;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 calc(#{$content-padding} - 16px); // subtracting 16px from content-padding in order to align icon-buttons with content
    @include mat.elevation(24, black, 0.6);

    @media screen and (min-width: 600px) {
      box-shadow: none;
      position: relative;
      padding: 0 $content-padding 0 calc(#{$content-padding} - 16px); // subtracting 16px from content-padding in order to align icon-buttons with content
      @include mat.elevation(0);
    }
  }
}

.topbar {
  &__search {
    flex: 1 1 300px;
    min-width: 1px;
    border-right: 1px solid;

    .mat-input-element {
      font-size: 16px !important;
    }

    .mat-form-field,
    .mat-form-field-wrapper,
    .mat-form-field-flex,
    .mat-form-field-infix {
      border-top: 0;
      padding: 0 !important;
      // height: calc(#{$topbar-height} - 1px);
      height: $topbar-height;
      align-items: center;
    }

    .mat-form-field-infix {
      margin-left: 24px;
    }

    .mat-form-field-underline {
      bottom: 0;
    }

    // FILTER BUTTON
    .mat-form-field-infix {
      display: flex;
      justify-content: flex-end;
      padding-right: 16px !important;
    }

    .mat-input-element {
      width: calc(100% - 40px);
    }

    .mat-form-field-prefix {
      margin-left: 16px;
    }
  }

  &__actions {
    flex: 1 1 300px;
    min-width: 1px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid $dark-dividers;
    padding: 0 calc(#{$content-padding} - 8px) 0 8px;

    > .mat-button-base {
      margin: 0 8px !important;
      cursor: pointer;
    }

    sc-profile-button {
      width: 40px !important;
      margin: 0 8px !important;
      cursor: pointer !important;
    }

    @media screen and (min-width: 960px) {
      justify-content: flex-end;
    }
  }

  &__client {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: $content-padding;
    cursor: pointer;

    &-icon {
      margin-right: 16px;
    }

    &-text {
      max-width: 160px;
    }

    &-location,
    &-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.actionbar {
  &__nav {
    flex: 0 0 auto;
    margin-right: 8px;

    > .mat-button-base {
      margin-right: 8px;
    }
  }

  &__breadcrump {
    flex: 1 1 auto;
    display: none;
    margin-right: 16px;

    @media screen and (min-width: 960px) {
      display: block;
    }
  }

  &__actions {
    display: none;

    @media screen and (min-width: 600px) {
      display: block;
      flex: 0 0 auto;

      > .mat-button-base {
        margin-right: $actionbar-button-spacing;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  &__actions--mobile {
    display: block;

    > .mat-button-base {
      margin-right: 8px;
    }

    @media screen and (min-width: 600px) {
      display: none;
      flex: 0 0 auto;
    }
  }
}

.btn__mobile-nav {
  display: block;
  position: fixed !important;
  top: $content-padding;
  left: $content-padding;
  z-index: 900;

  @media screen and (min-width: 600px) {
    display: none !important;
  }
}

.sidebar {
  &__header {
    height: $header-height;
    display: flex;
    align-items: center;
    padding: 16px 8px 16px 24px;
    transform: translateX(calc((#{$brand-width} + 16px) * -1));
    transition: transform $shell-transition-duration $ease-in-out-curve-function;
  }

  &__brand {
    width: $brand-width;
    height: 100%;
    // height: calc(#{$header-height} - 16px * 2);
    flex: 0 0 $brand-width;
    margin: 0 auto;
    object-fit: contain;
    object-position: 0 50%;
    opacity: 0;
    transition: opacity $shell-transition-duration linear;
  }

  &__btn-toggle-wide {
    transform: translateX(-64px);
    transition: transform $shell-transition-duration;
    margin: 0 0 0 8px !important;

    @media screen and (min-width: 600px) {
      display: block !important;
      transform: rotate(-90deg) translateX(0);
      transition: transform $icon-rotate-transition-duration cubic-bezier(0.2, 0, 0.38, 0.9) $shell-transition-duration,
        color $shell-transition-duration;

      &:hover {
        transition: color $shell-transition-duration;
      }
    }
  }

  &__btn-close-mobile-nav {
    display: none !important;
    margin-left: auto;
  }

  &__nav {
    height: calc(var(--app-height, 100vh) - #{$header-height});
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid;
  }
}

// MOBILE NAV

.shell-backdrop {
  opacity: 0;
}

.layout__wrapper--mobile-nav-expanded {
  .shell-backdrop {
    // display: block !important;
    background: rgba(0, 0, 0, 0.32);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
    opacity: 1;
    transition: opacity $shell-transition-duration $ease-in-out-curve-function;
  }

  .layout__sidebar {
    width: $sidebar-wide-width;
    @include mat.elevation-transition;
    @include mat.elevation(24, black, 0.6);

    transition: width $shell-transition-duration $ease-in-out-curve-function,
      border 0s linear $shell-transition-duration;
    border: 0;

    @media screen and (min-width: 600px) {
      width: 0;
    }
  }

  .btn__mobile-nav {
    display: none !important;
  }

  .sidebar {
    &__header {
      transform: translateX(0);
      transition: transform $shell-transition-duration $ease-in-out-curve-function;

      @media screen and (min-width: 600px) {
        transform: translateX(calc((#{$sidebar-wide-width} - #{$sidebar-condensed-width}) * -1));
        transition: transform $shell-transition-duration $ease-in-out-curve-function;
      }
    }

    &__brand {
      opacity: 1;
      transition: opacity $shell-transition-duration linear;
    }

    &__btn-toggle-wide {
      display: none !important;
    }

    &__btn-close-mobile-nav {
      display: block !important;

      @media screen and (min-width: 600px) {
        display: none;
      }
    }
  }

  .nav {
    &__list-item {
      width: $sidebar-wide-width;
    }

    &__link {
      padding-right: 9px; // adding 1px to padding-right, because at this state we have no border-right on the sidebar
    }
  }
}

//
// FOCUS MODE
//

.layout__wrapper--focus-mode {
  .layout__content-wrapper {
    padding-top: 0;

    @media screen and (min-width: 600px) {
      height: calc(var(--app-height, 100vh) - #{$topbar-height});
      margin-top: $topbar-height;
    }
  }

  .layout__main {
    margin-left: 0;
  }

  .layout__header {
    width: 100%;
  }
}

// SIDEBAR — COLLAPSED
//
// INITIAL STATE. SIDEBAR MOSTLY OFF CANVAS (EXCEPT ICONS) AND HAS NO ELEVATION.

.layout__wrapper--sidebar-collapsed {
  .layout__sidebar {
    @media screen and (min-width: 600px) {
      width: $sidebar-condensed-width;
      @include mat.elevation(0);
      border-right: 1px solid;
    }
  }

  .sidebar {
    &__header {
      transition: transform $shell-transition-duration $ease-in-out-curve-function;
    }
  }

  .nav {
    &__section-title {
      display: none;
    }

    &__section-seperator {
      display: block;
    }

    &__link-title {
      visibility: hidden;
    }
  }

  .nav__list--lvl-1,
  .nav__list--lvl-2,
  .nav__list--lvl-3 {
    .nav__link {
      padding-left: 24px;
    }
  }
}

// SIDEBAR — HOVER
//
// STATE: MOUSE HOVERING OVER SIDEBAR. SIDEBAR FLOATS IN AND RISES ELEVATION LEVEL

.layout__wrapper--sidebar-hover:not(.layout__wrapper--mobile-nav-expanded) {
  .layout {
    &__sidebar {
      display: none;

      @media screen and (min-width: 600px) {
        display: block;
        width: $sidebar-wide-width;
        border: 0;
        @include mat.elevation(24, black, 0.6);
        transition: width $shell-transition-duration $ease-in-out-curve-function,
          shadow $shell-transition-duration $ease-in-out-curve-function;
      }
    }

    &__main {
      @media screen and (min-width: 600px) {
        transition: margin-left $shell-transition-duration $ease-in-out-curve-function;
      }
    }

    &__header {
      @media screen and (min-width: 600px) {
        transition: width $shell-transition-duration $ease-in-out-curve-function;
      }
    }
  }

  .sidebar {
    &__header {
      transform: translateX(0);
      transition: transform $shell-transition-duration $ease-in-out-curve-function;
    }

    &__brand {
      opacity: 1;
      transition: opacity $shell-transition-duration linear;
    }

    &__btn-toggle-wide {
      @media screen and (min-width: 600px) {
        // display: block !important;
        transform: rotate(0deg);
        transition: transform $icon-rotate-transition-duration cubic-bezier(0.2, 0, 0.38, 0.9)
          $shell-transition-duration;
      }
    }
  }

  .nav {
    &__list-item {
      width: $sidebar-wide-width;
    }

    &__link {
      padding-right: 9px; // adding 1px to padding-right, because at this state we have no border-right on the sidebar
    }
  }
}

// SIDEBAR — FIXED
//
// STATE: TOGGLE-BUTTON ACTIVATED. SIDEBAR STAYS EXPANDEND AND LOWERS ELEVATION TO 0

.layout__wrapper--sidebar-fixed {
  @media screen and (min-width: 600px) {
    .nav {
      &__section-title {
        display: block;
      }

      &__section-seperator {
        display: none;
      }

      &__link-title {
        visibility: visible;
      }

      &__trailing-icon {
        display: block;
      }
    }

    .layout {
      &__sidebar {
        left: 0;
        width: $sidebar-wide-width;
        box-shadow: none;
        transition: width $shell-transition-duration $ease-in-out-curve-function,
          shadow $shell-transition-duration $ease-in-out-curve-function;
      }

      &__main {
        margin-left: $sidebar-wide-width;
        transition: margin-left $shell-transition-duration $ease-in-out-curve-function;
      }

      &__header {
        width: calc(100% - #{$sidebar-wide-width});
        transition: width $shell-transition-duration $ease-in-out-curve-function;
      }
    }

    .sidebar {
      &__header {
        transform: translateX(0);
        transition: transform $shell-transition-duration $ease-in-out-curve-function;
      }

      &__brand {
        opacity: 1;
        transition: opacity $shell-transition-duration linear;
      }

      &__btn-toggle-wide {
        display: block !important;
        transform: rotate(180deg);
        transition: transform $icon-rotate-transition-duration cubic-bezier(0.2, 0, 0.38, 0.9)
          $shell-transition-duration;
      }
    }
  }
}

.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: var(--app-height, 100vh);
}

//? Button reset
.quick-actions__item,
.notifications__item {
  font-family: inherit;
  font-size: 100%;
  border: none;
  margin: 0;
  text-transform: none;
  -webkit-appearance: button;
  cursor: pointer;

  &:focus {
    outline: 0;
  }
}

.quick-actions {
  &.mat-menu-panel {
    max-width: 280px !important;

    @media screen and (min-width: 400px) {
      max-width: 360px !important;
    }
  }

  .mat-menu-content {
    padding: 0 !important;
  }

  &__wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 1px;

    @media screen and (min-width: 400px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 360px;
    }
  }

  &__title {
    text-align: center;
    transition: color $hover-transition-duration linear;
  }

  &__icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 8px;
    transition: color $hover-transition-duration linear;
  }

  &__item {
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: background-color $hover-transition-duration linear;

    &:hover {
      transition: background-color $hover-transition-duration linear;

      .quick-actions__icon {
        transition: color $hover-transition-duration linear;
      }

      .quick-actions__title {
        transition: color $hover-transition-duration linear;
      }
    }
  }
}

// .notifications {
//   .mat-menu-panel {
//     width: 280px !important;
//     max-height: 300px !important;
//   }

//   .mat-menu-content {
//     padding-top: 0 !important;
//   }

//   &__date-header {
//     padding: 16px;
//   }

//   &__item {
//     width: 100%;
//     padding: 8px 16px;
//     text-align: left;
//   }

//   &__title-row {
//     display: flex;
//     align-items: center;
//     margin-bottom: 4px;
//   }

//   .mat-icon {
//     flex: 0 0 40px;
//   }

//   &__title {
//     flex: 1 0 160px;
//     margin-bottom: 0;
//   }

//   &__timestamp {
//     flex: 0 0 auto;
//     padding-left: 8px;
//   }

//   &__description {
//     margin-left: 40px;
//   }
// }