//  Sizes
$sidebar-regular-width: 12.5rem !default;
$sidebar-big-width: 6.25rem !default;
$sidebar-small-width: 3.75rem !default;

// Items, general
$sidebar-item-color: $darker-grey !default;
$sidebar-item-icon-offset: .5rem !default;
$sidebar-item-border-width: 2px !default;
$sidebar-item-border-color: transparent !default;
$sidebar-item-padding: 1em calc(.825em - #{$sidebar-item-border-width}) !default;
$sidebar-item-font-weight: $weight-normal !default;

$sidebar-small-item-padding: .875rem !default;
$sidebar-small-item-border-width: 0 !default;

$sidebar-dark-item-color: $white !default;

//  Items, states
$sidebar-item-active-color: $accent !default;
$sidebar-item-active-bg-color: $white !default;
$sidebar-item-active-border-color: $accent !default;
$sidebar-item-active-font-weight: $weight-bold !default;

$sidebar-dark-item-active-color: $accent !default;
$sidebar-dark-item-active-bg-color: transparent !default;

//  Colors
$sidebar-bg-color: $grey-lighter !default;
$sidebar-dark-bg-color: $black !default;

//  Sidebar brand
$sidebar-brand-bg-color: $accent !default;

//  Sidebar burger
$sidebar-burger-color: $black !default;
$sidebar-burger-dimensions: 3.125rem !default;

$sidebar-big-burger-dimensions: 5rem !default;
$sidebar-small-burger-dimensions: 3.75rem !default;

$sidebar-submenu-offset: calc(.825em - #{$sidebar-item-border-width}) !default;
$sidebar-submenu-item-border-color: $grey-light !default;

// Sidebar header
$sidebar-header-color: $black;
$sidebar-header-font-weight: bold;
$sidebar-header-padding: 1em calc(.825em - 2px) 1em .5em;

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: $sidebar-regular-width;
  background-color: $sidebar-bg-color;
  display: none;
  overflow-y: auto;

  //  Sizes
  &.is-big,
  &.is-small {
    .sidebar-brand > *:not(.sidebar-burger) {
      display: none;
    }
  }

  &.is-big {
    width: $sidebar-big-width;

    .sidebar-brand .sidebar-burger {
      @include hamburger_big($sidebar-big-burger-dimensions);
      width: 100%;
    }

    .sidebar-item {
      flex-direction: column;
      text-align: center;

      .icon {
        margin-right: 0;
        margin-bottom: .875rem;
        font-size: 1.5em;
        height: 1.8rem;
        width: 1.8rem;
      }
    }
  }

  &.is-small {
    width: $sidebar-small-width;

    .sidebar-brand .sidebar-burger {
      @include hamburger($sidebar-small-burger-dimensions);
      width: 100%;
    }

    .sidebar-item {
      display: block;
      padding: $sidebar-small-item-padding;
      border-width: $sidebar-small-item-border-width;

      .icon {
        margin: 0;
        font-size: 1.5em;
        height: 2rem;
        width: 2rem;
      }

      .icon + * {
        display: none;
      }
    }

    div.sidebar-item {
      display: none;
    }
  }

  //  Colors
  &.is-dark {
    background-color: $sidebar-dark-bg-color;

    .sidebar-item {
      color: $sidebar-dark-item-color;
    }

    .sidebar-item:not(div):hover,
    .sidebar-item.is-active {
      color: $sidebar-dark-item-active-color;
      background-color: $sidebar-dark-item-active-bg-color;
    }
  }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  background-color: $sidebar-brand-bg-color;
}

.sidebar-burger {
  color: $sidebar-burger-color;
  @include hamburger($sidebar-burger-dimensions);
}

.sidebar-header {
  padding: $sidebar-header-padding;
  width: 100%;
  font-weight: $sidebar-header-font-weight;
  color: $sidebar-header-color;
}

.sidebar-item {
  display: flex;
  width: 100%;
  align-items: center;
  color: $sidebar-item-color;
  line-height: 1;
  background-color: transparent;
  font-weight: $sidebar-item-font-weight;

  &.is-active {
    font-weight: $sidebar-item-active-font-weight;
  }

  &.is-active {
    background-color: $sidebar-item-active-bg-color;
    color: $sidebar-item-active-color;
    border-color: $sidebar-item-active-border-color;
  }

  .icon {
    margin-right: $sidebar-item-icon-offset;
    font-size: .875em;
    height: 1rem;
    width: 1rem;
  }

  .sidebar-menu {
    width: 100%;
    padding-left: $sidebar-submenu-offset;

    .sidebar-item:not(div):not(.is-active):not(:hover) {
      border-color: $sidebar-submenu-item-border-color;
    }
  }
}

.sidebar-item:not(a) {
  flex-direction: column;
}

.sidebar-item:not(div) {
  padding: $sidebar-item-padding;
  border-left: $sidebar-item-border-width solid $sidebar-item-border-color;

  &:hover {
    background-color: $sidebar-item-active-bg-color;
    color: $sidebar-item-active-color;
    border-color: $sidebar-item-active-border-color;
  }
}

@include desktop() {
  .sidebar {
    display: block;
  }

  .sidebar + .page-content {
    padding-left: $sidebar-regular-width;
  }

  .sidebar.is-small + .page-content {
    padding-left: $sidebar-small-width;
  }

  .sidebar.is-big + .page-content {
    padding-left: $sidebar-big-width;
  }
}