.tool-bar {
  @apply flex items-center justify-between;
  background: #fff;
  height: 36px;
  padding: 0 8px;
  margin-bottom: 5px;
  border: 1px solid #e8eaec;

  .tools {
    .el-button {
      height: 24px;
      line-height: 16px;
      min-height: auto;
      border: none;
      padding: 4px;
      border-radius: 0;
      margin-right: 6px;

      &.is-disabled {
        color: #8a9194;
      }

      & + .el-button {
        margin-left: 0;
      }

      &:hover {
        background-color: #edeff5;
      }

      .iconfont {
        vertical-align: bottom;
      }
    }
  }

  .menus {
    height: 34px;
    line-height: 34px;

    .menu-item {
      @apply relative inline-block align-bottom cursor-pointer select-none;
      margin-left: 10px;
      padding: 0 8px;

      &.active {
        &::before {
          display: block;
          content: " ";
          position: absolute;
          left: 0;
          top: -1px;
          width: 100%;
          height: 35px;
          border: 1px solid #ddd;
          border-top-color: #409eff;
          border-bottom: none;
          background-color: #f5f7f9;
        }
        color: #409eff;
      }
      &.disabled {
        color: #ccc;
        cursor: not-allowed
      }
      .text {
        @apply relative;
        z-index: 1;
      }

      .icon {
        font-size: 17px;
      }
    }
  }
}
