.os-action-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding-top: $os-header-height;
  width: $action-bar-closed-width;
  background: $action-bar-background;
  z-index: $action-bar-z-index;
  @include transition(.1s ease-out all);

  .action-bar-list {
    list-style: none;
    margin: 0;
    width: 100%;
  }

  li {
    position: relative;
    display: block;
    text-indent: 0;
    cursor: pointer;
    @include localized-line;

    &:hover {
      .osicon {
        color: $action-bar-icon-hover-color;
      }

      .osicon-label {
        color: $action-bar-icon-label-hover-color;
      }
    }
  }

  .action-bar-user-avatar {
    cursor: default;
  }

  .action-bar-anchor {
    display: block;
    text-decoration: none;
    color: $action-bar-icon-hover-color;

    &:hover {
      color: $action-bar-icon-label-hover-color;
    }
  }

  .osicon {
    display: inline-block;
    margin: 0 auto;
    font-size: $action-bar-icon-font-size;
    color: $action-bar-icon-color;
    cursor: pointer;
  }

  .osicon-label {
    overflow: hidden;
    display: none;
    color: $action-bar-icon-label-color;
    font-size: $action-bar-icon-label-size;
    font-weight: $font-weight-regular;
    margin-left: .25rem;
    vertical-align: middle;
    text-overflow: ellipsis;
  }

  .action-bar-top {
    padding-left: $action-bar-padding-side;
  }

  .action-bar-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-bottom: 1.5rem;
    padding-left: $action-bar-padding-side;

    .user-icon {
      display: inline-block;
      position: relative;
      height: $action-bar-avatar-icon-side-length;
      width: $action-bar-avatar-icon-side-length;
      @include border-radius($round-border-radius);
      @include box-shadow(1px 1px 1px rgba(0, 0, 0, .5));
      border: 1px solid transparent;
      overflow: hidden;

      img {
        height: $action-bar-avatar-icon-side-length;
        width: $action-bar-avatar-icon-side-length;
      }
    }
  }
}

// Rules for expanded state
.action-bar-expanded {
  width: $action-bar-expanded-width;

  .osicon-label {
    display: inline-block;
  }
}

// Should close when drawer is open
.os-drawer-active {
  .os-action-bar {

    width: $action-bar-closed-width;

    .action-bar-list {

      .osicon-label {
        display: none;
      }

    }
  }
}