@import "~@angular/material/theming";
@import "../assets/scss/variable";
@import "../assets/scss/mixin.scss";

.sidenav-container {
  height: 100%;
  background-color: #eaeaea;
}

.sidenav {
  @include ellipsisText;
  width: 60px;
  background: $background-black-color;
  transition-duration: 0.5s;

  &__open {
    transition-duration: 0.5s;
    width: 235px;
  }

  .heading {
    margin-top: 16px;
    margin-left: -4px;
    height: 60px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;

    &__logo {
      width: 240px;
      overflow: hidden;
      height: 32px;
    }

    &__icon {
      position: absolute;
      right: -5px;
      top: 23px;

      &__item {
        color: $dark-grey-color;
        transform: scale(1.5)
      }
    }
  }

  .menu {
    overflow: hidden;

    &__item {
      font-size: 16px;
      font-weight: lighter;
      color: $dark-grey-color;

      &__active {
        color: #fff;
      }

      &__icon {
        width: 25px;
        height: 25px;
      }
    }
  }
}

.sidenav .mat-toolbar {
  background: inherit;
}

.app-toolbar {
  position: relative;

  background: none;

  &__logo {
    width: 140px;
    padding-left: 24px;
  }

  &__icon {
    color: $dark-grey-color;
  }

  &__menu {
    cursor: pointer;
  }

  &__profile-block {
    font-size: 16px;

    &__avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid $orange-2-color;
      cursor: pointer;
      margin-right: 5px !important;

      &__icon {
        width: 40px;
        height: 40px;
        font-size: 35px;
        background: $orange-2-color;
        border: 1px solid $orange-2-color;
        border-radius: 50%;
        margin-right: 5px !important;
      }
    }

    &__icon {
      cursor: pointer;
      transform: scale(0.8);
      margin-right: 5px !important;
    }

    &__menu-icon {
      cursor: pointer;
      color: $dark-grey-color;
      transform: scale(1.2);
      margin-right: 5px !important;
    }

    &__button {
      font-size: 16px;
      cursor: pointer;
    }
  }
}

.content-container {
  min-height: calc(100% - 128px);
  overflow-x: hidden;

  @media ($mat-xsmall) {
    min-height: calc(100% - 112px);
  }
}

.move-up {
  margin-left: 0px !important;

  @media (min-width: $breakpoint-xs) {

    margin-left: 235px !important;
    transition-duration: 0.5s;

  }
}

.move-down {
  margin-left: 0px !important;

  @media (min-width: $breakpoint-xs) {
    margin-left: 60px !important;
    transition-duration: 0.5s;


  }
}

.footer {
  &__copyright {
    text-align: center;
    white-space: pre-wrap;
    
    @media (max-width: $breakpoint-sm) {
      padding: 10px 0;
    }
  }
}
