.side-bar {
  display: flex;
  flex-direction: row;

  &__header {
    @include gmq(portable) {
      padding-left: 1em;
    }
  }

  &__container {
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translate3d(-100%, 0, 0);
    z-index: $zIndex-10;
  }

  &__overlay {
    @include abs-overlay();

    background-color: rgba(palette(blue, x-dark), 0);
    transition: background-color 0.2s ease;
    z-index: -1;
  }

  @each $theme, $color in $nav-themes {
    &--#{$theme} {
      background: $color;
    }
  }

  &__body {
    flex: 1 1 0%;
    overflow: auto;
  }

  .nav-bar {
    min-width: 140px;

    .side-bar-is-collapsed & {
      @include gmq(desk) {
        min-width: 0;
      }
    }

    &__icon {
      @include gmq(portable) {
        display: none;
      }
    }

    &__item {
      display: flex;
      min-height: 50px;
    }

    .container {
      width: 100%;
    }

    &__link {
      display: flex;
    }
  }

  &--off-canvas {
    .side-bar__container {
      bottom: 0;
      position: absolute;
      top: 0;
      width: 23em;
      z-index: $zIndex-10 + 1;
    }
  }

  &--is-open--true {
    .side-bar {
      &__container {
        transform: none;
      }

      &__overlay {
        background-color: rgba(palette(blue, x-dark), 0.6);
        z-index: $zIndex-10 + 1;
      }
    }
  }

  &--fixed {
    .side-bar__container {
      width: 12em;
      transform: none;
    }
  }

  &--collapseable {
    .side-bar__container {
      width: 100%;
      transform: none;
    }

    .side-bar__body {
      svg {
        width: 1.25em;
        min-width: 1.25em;
        min-height: 1.25em;
      }
    }
  }

  &__toggle-btn {
    height: 60px;

    .icon {
      margin-right: 0.5em;
      stroke: white;
    }

    .liquid-child {
      justify-content: flex-end;
    }

    &--collapsed {
      .icon {
        transform: rotate(180deg);
      }
    }
  }
}