@import "~@/mixins.less";

@total-height: 130px;
@btns-height: 130px;
@specialBtns-height: 128px;
@btns-item-bgColor: #d2e5ff;

.buttonComponent {
  .size(100%, @total-height);

  :global {
    .btns {
      border: 1px solid black;
      .size(100%, @btns-height);
    }

    .arrow {
      .size(100%, calc(@total-height - @btns-height));
      .flex(center, center);

      .expandCut {
        z-index: 1;
        padding: 2px 10px;
        background: #fff;
        border-radius: 5px 5px;
        color: #a1a1a1;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      }
    }

    .ant-badge-count {
      background: transparent;
      border: 1px solid #FF0000;
      color: #FF0000;
      box-shadow: none;
      .flex(center, center);
    }
  }

  &.expand {
    .size(100%, @total-height);
    transition: all 0.5s ease-in-out;

    :global {
      .btns {
        .size(100%, @btns-height);
        opacity: 1;
        transition: all 0.5s ease-in-out;
        border: none;

      }

    }
  }

  .btnsBox {
    height: 100%;
    overflow: hidden;

    display: grid;
    grid-template-columns: repeat(8, minmax(0px, 1fr));
    grid-auto-rows: minmax(0px, 0.5fr);
    gap: 10px;

    :global {

      .btnsBoxItem {
        .flex(center);
        height: 60px;

        .itemBadge {
          .flex(center);
          width: 100%;
          gap: 10px;
        }

        cursor: context-menu;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
        padding: 10px 22px;
        transition: all 0.2s ease-in-out;

        &:hover,
        &.active {
          background-color: @btns-item-bgColor;

        }

        &.active {
          .itemName {
            color: #1890FF;
          }
        }

        &.disabled {
          background-color: #e1e1e1;
          opacity: 0.6;
          cursor: not-allowed;

          * {
            cursor: not-allowed;
          }
        }

        .itemName {
          font-size: 17px;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          color: #000;
        }
      }
    }



  }


  &.packup {
    .size(100%, calc(@total-height - @btns-height));
    transition: all 0.5s ease-in-out;

    :global {
      .btns {
        .size(100%, 0);
        opacity: 0;
        transition: all 0.5s ease-in-out;
      }
    }
  }
}

.specialBtns {
  .size(100%, @specialBtns-height);

  :global {
    .btns {
      border: 1px solid black;
      .size(100%, @specialBtns-height);
    }
  }

  &.expand {
    .size(100%, @specialBtns-height);
    transition: all 0.5s ease-in-out;

    :global {
      .btns {
        .size(100%, @specialBtns-height);
        opacity: 1;
        transition: all 0.5s ease-in-out;
        border: none;
      }
    }
  }
}

.workOverTime {
  .flex();
  flex-direction: column;
  justify-content: space-between;
  // padding-left: 50px;
  :global {
    .ant-btn {
      height: 48%;
      .flex(center, center);
    }
  }
}