@statusBarHeight: 30px;
@fontColor: #000;

.statusbar {
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

  border-top: 1px solid @gray-dark;
  height: @statusBarHeight;
  min-height: @statusBarHeight;
  display: flex;
  flex-direction: row;

  .box-tabs {
    flex-grow: 1;
  }

  .button {
    border: 0 none;
    color: #000;
    font-size: 18px;
    line-height: inherit;
  }

  i.icon {
    width: 22px;
    height: 22px;

    &.icon-plus {
      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{fontColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
    }
  }
}

.box-tabs {
  ul {
    margin: 0;
    padding: 0;
    white-space: nowrap;

    > li {
      list-style: none;
      display: inline;

      &:not(.active) {
        a {
          color: #848484;
        }
      }

      a {
        display: inline-block;
        padding: 0 10px 0;
        line-height: @statusBarHeight;
        margin-right: -1px;
        background-color: #f1f1f1;
        outline: none;
        border: 1px solid #cbcbcb;
        border-top: 0 none;
        border-bottom: 0 none;
        color: #000;
        height: 100%;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}