/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-sidebar-theme() {

  el-sidebar {

    background-color: el-theme(sidebar-background-color);
    box-shadow: el-theme(sidebar-shadow);
    color: el-theme(sidebar-text-color);
    font-family: el-theme(sidebar-text-font-family);
    font-size: el-theme(sidebar-text-font-size);
    font-weight: el-theme(sidebar-text-font-weight);
    line-height: el-theme(sidebar-text-line-height);
    width: el-theme(sidebar-width);

    .main-container {
      height: el-theme(sidebar-height);
      width: el-theme(sidebar-width);
    }

    .scrollable {
      padding: el-theme(sidebar-padding);
      position: relative;

      -webkit-transform: translate3d(0, 0, 0); // ios optimisation
      @include media-breakpoint-down(sm) {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }

      @include el-scrollbars(
          el-theme(sidebar-scrollbar-color),
          el-theme(sidebar-scrollbar-background-color),
          el-theme(sidebar-scrollbar-width));
    }

    // TODO: width used to use transition on width
    &.collapsed {
      width: 0;
      padding: 0;
      .main-container {
        width: 0;
        padding: 0;
      }
      .scrollable {
        width: 0;
        padding: 0;
        overflow: hidden;
      }

      el-sidebar-header,  el-sidebar-footer {
        width: 0;
        padding: 0;
        overflow: hidden;
      }
    }

    &.compacted {
      width: el-theme(sidebar-width-compact);
      .main-container {
        width: el-theme(sidebar-width-compact);
      }

      el-menu {
        width: el-theme(sidebar-width-compact);

        .menu-item a.active {
          position: relative;

          &::before {
            position: absolute;
            content: '';
            @include el-ltr(left, 0);
            @include el-rtl(right, 0);
            top: 0;
            height: 100%;
            width: 4px;
            background: el-theme(sidebar-menu-item-highlight-color);
          }
        }

        > .menu-items > .menu-item > a {
          span, .expand-state {
            display: none;
          }
        }

        .menu-items > .menu-item {
          transition: border-color 1s ease;

          &.menu-group {
            display: block;
            color: transparent;
            width: 0;
            padding: 0;
            overflow: hidden;
          }

          i {
            margin-right: 0;
          }

          a {
            justify-content: center;
          }

          & > .expanded {
            display: none;
          }
        }

      }
      // we need to pull the content
      &.left.fixed ~ .content {
        margin-left: el-theme(sidebar-width-compact);
      }

      &.fixed.right ~ .content {
        margin-left: 0;
        margin-right: el-theme(sidebar-width-compact);
      }

      &.left.fixed ~ .content.center {
        padding-left: el-theme(sidebar-width-compact);
      }

      &.fixed.right ~ .content.center {
        padding-left: 0;
        padding-right: el-theme(sidebar-width-compact);
      }

      &.start.fixed ~ .content {
        @include el-ltr(margin-left, el-theme(sidebar-width-compact));
        @include el-rtl(margin-right, el-theme(sidebar-width-compact));
      }

      &.fixed.end ~ .content {
        @include el-ltr(margin-right,el-theme(sidebar-width-compact));
        @include el-rtl(margin-left, el-theme(sidebar-width-compact));
      }

      &.start.fixed ~ .content.center {
        @include el-ltr(padding-left, el-theme(sidebar-width-compact));
        @include el-rtl(padding-right, el-theme(sidebar-width-compact));
      }

      &.fixed.end ~ .content.center {
        @include el-ltr(padding-right, el-theme(sidebar-width-compact));
        @include el-rtl(padding-left, el-theme(sidebar-width-compact));
      }
    }

    &.fixed.left.collapsed + .content,
    &.fixed.start.collapsed + .content {
      margin-left: 0;
    }

    &.fixed.right.collapsed + .content,
    &.fixed.end.collapsed + .content {
      margin-right: 0;
    }

    &.expanded {
      width: el-theme(sidebar-width);
      > .scrollable {
        width: el-theme(sidebar-width);
      }
    }

    el-sidebar-header {
      padding: el-theme(sidebar-padding);
      height: el-theme(sidebar-header-height);
    }

    el-sidebar-footer {
      padding: el-theme(sidebar-padding);
      height: el-theme(sidebar-footer-height);
    }

    el-menu {
      margin: 0 -#{el-theme(sidebar-padding)} -#{el-theme(sidebar-padding)};
    }
  }
}