@if $enable-sidebar-toggler {
  #main {
    position: relative;

    // Fix full screen view for dashboard plugin
    // https://github.com/jgraichen/redmine_dashboard
    @at-root .controller-rdb_taskboard & {
      position: static;
    }
  }

  #sidebar {
    @if $fixed-layout {
      will-change: margin, opacity;
      transition: margin .5s, opacity .5s;
      opacity: 1;
    } @else {
      will-change: margin;
      transition: margin .5s;
    }

    &.sidebar-hiding {
      @if $fixed-layout {
        opacity: 0;
      }
      @if $sidebar-position == "left" {
        margin-left: -$sidebar-width;
      } @else {
        margin-right: -$sidebar-width;
      }
    }

    &.sidebar-hidden {
      display: none;
    }
  }

  .sidebar-toggler {
    display: block;
    position: absolute;
    top: 1px;
    width: 14px;
    height: 16px;
    border: 2px solid $gray-700;
    border-radius: $border-radius-base;
    background-color: $gray-200;
    background-position: center;
    line-height: 1;
    user-select: none;

    @media print {
      display: none;
    }

    &:hover,
    &:focus,
    &:active {
      background-color: $gray-300;
    }

    @if $sidebar-position == "left" {
      left: 0;
      background-image: inline-svg("chevron-left.svg", (path: (fill: $gray-700)));

      @if not $fixed-layout {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    } @else {
      right: 0;
      background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-700)));

      @if not $fixed-layout {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    &.sidebar-hidden {
      @if $sidebar-position == "left" {
        background-image: inline-svg("chevron-right.svg", (path: (fill: $gray-700)));
      } @else {
        background-image: inline-svg("chevron-left.svg", (path: (fill: $gray-700)));
      }
    }
  }
} @else {
  .sidebar-toggler {
    display: none;
  }
}
