@import 'dropdown-list.less';
.mind-tab-panel {
  @apply h-full w-full;
  .menu-container {
    @apply flex;
    & > div {
      @apply inline-flex flex-wrap items-center overflow-hidden;

      border-right: 1px dashed #eeeeee;
    }
    & > div:last-of-type {
      @apply border-r-0;
    }
  }
  .menu-btn {
    @apply flex cursor-pointer items-center justify-center;
  }
  .menu-btn:not([disabled='true']):hover {
    background-color: var(--color-fill-2);
  }
  .menu-btn[disabled='true'] {
    opacity: 0.7;
  }
  .tab-icons {
    @apply inline-flex;

    width: 20px;
    height: 20px;
  }
  .do-group {
    @apply h-full;

    padding: 0 5px;
    width: 40px;
    p {
      @apply m-0 flex items-center justify-center;

      height: 50%;
    }
    .undo i {
      background-position: 0 -1240px;
    }
    .redo i {
      background-position: 0 -1220px;
    }
  }
  .insert-group {
    width: 110px;
    & > div {
      margin: 0 5px;
    }
    .insert-sibling-box {
      i {
        background-position: 0 -20px;
      }
    }
    .insert-parent-box {
      i {
        background-position: 0 -40px;
      }
    }
  }
  .edit-del-group,
  .move-group {
    @apply flex items-center justify-center;

    width: 70px;
  }
  .move-group {
    .move-up {
      i {
        background-position: 0 -280px;
      }
    }
    .move-down {
      i {
        background-position: 0 -300px;
      }
    }
  }
  .edit-del-group {
    .edit {
      i {
        background-position: 0 -60px;
      }
    }
    .del {
      i {
        background-position: 0 -80px;
      }
    }
  }
  .attachment-group {
    @apply flex items-center justify-center;

    width: 185px;
    button {
      @apply flex items-center justify-center border-none bg-transparent bg-no-repeat p-0 outline-none;

      width: 45px;
      height: 20px;
      background-position: right;
      span {
        margin-left: 15px;
      }
    }
    button:hover {
      background-color: var(--color-fill-2);
    }
    & > div {
      @apply flex h-full flex-wrap items-center justify-center;

      width: 60px;
    }
    .insert {
      @apply bg-no-repeat;

      height: 25px;
    }
    .link {
      .insert {
        background-position: 50% -100px;
      }
    }
    .img {
      .insert {
        background-position: 50% -125px;
      }
    }
    .remark {
      .insert {
        background-position: 50% -1150px;
      }
    }
  }
  .progress-group,
  .sequence-group {
    @apply flex items-center justify-center;

    width: 135px;
    ul {
      @apply m-0 list-none p-0;

      width: 120px;
      li {
        @apply inline-block;

        margin: 2px;
        width: 20px;
        height: 20px;
      }
    }
  }
  .sequence-group {
    .loop(@i) when (@i >= 0) {
      .sequence-@{i} {
        background-position: 0 -20px * (-1 + @i);
      }
      .loop(@i - 1);
    }
    .loop(9);
  }
  .progress-group {
    .loop(@i) when (@i >= 0) {
      .progress-@{i} {
        background-position: 0 -20px * (-1 + @i);
      }
      .loop(@i - 1);
    }
    .loop(9);
  }
  .arrange-group {
    width: 65px;
    .arrange {
      @apply flex flex-wrap items-center justify-center;
    }
    .tab-icons {
      @apply m-0 inline-block bg-no-repeat;

      width: 25px;
      height: 25px;
      background-position: 0 -150px;
    }
  }
  .style-group {
    width: 150px;
    .clear-style-btn {
      @apply flex flex-wrap items-center justify-center;

      width: 65px;
      .tab-icons {
        @apply m-0 inline-block bg-no-repeat;

        width: 25px;
        height: 25px;
        background-position: 0 -175px;
      }
    }
    .copy-paste-panel {
      width: 70px;
      .tab-icons {
        @apply inline-block;

        width: 20px;
        height: 20px;
      }
      .copy-style {
        .tab-icons {
          background-position: 0 -200px;
        }
      }
      .paste-style {
        .tab-icons {
          background-position: 0 -220px;
        }
      }
    }
  }
  .font-group {
    width: 250px;
    * {
      font-size: 12px;
    }
    .font-family-select {
      width: 150px;
    }
    .font-size-select {
      margin-left: 5px;
      width: 80px;
    }
    .font-bold,
    .font-italic {
      @apply my-0 inline-block;

      margin: 0 3px;
      width: 20px;
      height: 20px;
    }
    .font-bold {
      background-position: 0 -242px;
    }
    .font-italic {
      background-position: 0 -262px;
    }
  }
  .expand-group,
  .selection-group {
    @apply flex items-center justify-center;

    margin: 0 5px;
    width: 60px;
    button {
      @apply border-none outline-none;
    }
    span {
      font-size: 12px;
    }
  }
  .expand-group {
    .expand {
      width: 40px;
      height: 25px;
      background-position: center -995px;
    }
    i {
      font-size: 12px;
    }
  }
  .selection-group {
    .selection {
      width: 40px;
      height: 25px;
      background-position: 7px -1175px;
    }
    i {
      font-size: 12px;
    }
  }
}
