// ============================================================
// Sidebar, controls, hotbar, navigation
// ============================================================

#sidebar {
  font-size: 1rem;
  background-color: #f5f5f5;
  background-position: 0px 35px;
  background-repeat: no-repeat;
  background-image: @background-image;
  color: @color-text-dark;

  &.collapsed {
    height: 470px !important;
  }

  #sidebar-tabs i {
    display: inline-block;
    background-position: center;
    background-size: cover;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
  }
}

#sidebar-tabs {
  flex: 0 0 32px;
  box-sizing: border-box;
  margin: 0 0 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.5);

  > .collapsed,
  ~ .chat-control-icon {
    color: @color-text-dark;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
  }

  > .item.active {
    border: 1px solid rgba(114, 98, 72, 1);
    background: rgba(30, 25, 20, 0.75);
    box-shadow: 0 0 6px inset rgba(114, 98, 72, 1);
  }
}

// Sidebar tabs chat control icon
#sidebar-tabs > .collapsed,
#chat-controls .chat-control-icon {
  color: @color-text-dark;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
}

.sidebar-tab .directory-list .entity {
  border-top: 1px dashed rgba(0, 0, 0, 0.25);
  border-bottom: 0 none;
  padding: 0.25rem 0;

  &:hover {
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
  }
}

// Controls & tools
#controls {
  .scene-control,
  .control-tool {
    box-shadow: 0 0 3px #000;
    margin: 0 0 8px;
    border-radius: 0;
    background: @color-control-dark;
    background-origin: padding-box;
    -o-border-image: url(img/ui/footer-button.png) 10 repeat;
    border-image: url(img/ui/footer-button.png) 10 repeat;
    border-image-width: 4px;
    border-image-outset: 0px;
  }

  .scene-control.active,
  .control-tool.active,
  .scene-control:hover,
  .control-tool:hover {
    background: @color-control-warm;
    background-origin: padding-box;
    -o-border-image: url(img/ui/footer-button.png) 10 repeat;
    border-image: url(img/ui/footer-button.png) 10 repeat;
    border-image-width: 4px;
    border-image-outset: 0px;
    box-shadow: 0 0 3px #ff6400;
  }
}

// Hotbar
#hotbar {
  #action-bar #macro-list {
    border: 1px solid @color-control-warm;
    box-shadow: 2px 2px 5px #000000;
  }

  #action-bar .macro {
    -o-border-image: url(img/ui/bg_control.jpg) 21 repeat;
    border-image: url(img/ui/bg_control.jpg) 21 repeat;
    border-image-slice: 6 6 6 6 fill;
    border-image-width: 6px 6px 6px 6px;
    border-image-outset: 0px 0px 0px 0px;
    border-radius: 0px;
  }

  .bar-controls {
    background: @color-control-dark;
    border: 1px solid @color-control-warm;
  }
}

// Players & navigation
#players {
  -o-border-image: url(img/ui/footer-button.png) 10 repeat;
  border-image: url(img/ui/footer-button.png) 10 repeat;
  border-image-width: 4px;
  border-image-outset: 0px;
  background: @color-control-dark;
}

#navigation #scene-list {
  .scene.nav-item {
    background: @color-control-dark;
    background-origin: padding-box;
    -o-border-image: url(img/ui/footer-button.png) 10 repeat;
    border-image: url(img/ui/footer-button.png) 10 repeat;
    border-image-width: 4px;
    border-image-outset: 0px;

    &.active {
      background: @color-control-warm;
    }
  }

  .scene.view,
  .scene.context {
    background: @color-control-warm;
    background-origin: padding-box;
    -o-border-image: url(img/ui/footer-button.png) 10 repeat;
    border-image: url(img/ui/footer-button.png) 10 repeat;
    border-image-width: 4px;
    border-image-outset: 0px;
    box-shadow: 0 0 3px #ff6400;
  }
}

#navigation #nav-toggle {
  background: @color-control-dark;
  background-origin: padding-box;
  -o-border-image: url(img/ui/footer-button.png) 10 repeat;
  border-image: url(img/ui/footer-button.png) 10 repeat;
  border-image-width: 4px;
  border-image-outset: 0px;
}