/* ========================================================================================= */
/* COMPONENTS - SIDEBAR */
/* ========================================================================================= */

.logo-comitium {
  width: 201px !important;
  height: 50px;

  &.is-reduced {
    width: 50px !important;
  }

  @media (max-width: 768px) {
    width: 50px !important;
  }
}

.logo {
  position: absolute;
  top: 0;
  right: 40px;
  bottom: 0;
  left: 0;
  border-right: 1px solid #E9E9E9;
  background: url(/bundles/comitium5designer/global/img/sidebar/c-logo.svg) no-repeat 10px center !important;
  background-size: 130px !important;
  transition: all .15s ease-in-out;

  &.is-reduced {
    width: 50px;
    background: url(/bundles/comitium5designer/global/img/sidebar/c-logo-icon.svg) no-repeat 10px center !important;
    background-size: 26px !important;
  }

  &:hover {
    opacity: .6;
  }
  @media (max-width: 768px) {
    width: 50px !important;
    background: url(/bundles/comitium5designer/global/img/sidebar/c-logo-icon.svg) no-repeat 10px center !important;
    background-size: 30px !important;
  }
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: auto;
  width: 240px !important;
  margin-top: 50px;
  background: #FFF;
  box-shadow: 1px 0 2px #DDD;
  transition: all .15s ease-in-out;

  &.toggled {
    width: 100% !important;
  }

  &.is-reduced {
    width: 49px !important;
    margin-top: 100px !important;
  }

  @media (max-width: 768px) {
    position: absolute;
    display: block;
    z-index: 100;
    width: 100% !important;
    height: 0 !important;
    min-height: 0;

    &.is-reduced {
      position: absolute;
      display: block;
      z-index: 100;
      width: 100% !important;
      height: calc(100vh - 50px) !important;
      min-height: 0;
      margin-top: 50px !important;
    }
  }
}

.sidebar::-webkit-scrollbar {
  scrollbar-color: yellow #800080;
  scrollbar-width: 10px;
}

.sidebar-brand {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2 !important;
  width: 241px;
  height: 50px !important;
  padding: 0 !important;
  background-color: $white !important;
  border-bottom: 1px solid #DCEEF5;

  &.is-reduced {
    width: 50px !important;
  }

  @media (max-width: 768px) {
    width: 90px !important;
  }
}

.c-sidebar {
  &__label {
    margin-left: 10px !important;
    &.is-reduced {
      display: none !important;
    }

    @media (max-width: 768px) {
      &.is-reduced {
        display: block !important;
        text-align: left !important;
      }
    }
  }
}

.sidebar hr.sidebar-divider {
  opacity: 0;
  margin-top: 33px;
}



.fa-table:before {
  content: url(/bundles/comitium5designer/global/img/sidebar/c-icon-templates.svg) !important;
  width: 14px !important;
  display: block !important;
}

.fa-mobile:before {
  content: url(/bundles/comitium5designer/global/img/sidebar/c-icon-breakpoints.svg) !important;
  width: 16px !important;
  display: block !important;
}

.fa-exit:before {
  content: url(/bundles/comitium5designer/global/img/sidebar/c-icon-return.svg) !important;
  width: 16px !important;
  display: block !important;
}

