.basePage {
  .left {
    min-width: 14vw;
    height: calc(100vh - 20px);

    overflow: hidden;
    padding: 10px 5px;

    background-color: var(--color-bg-secondary);
  }
  .right {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-base);
    .rightBody {
      flex: 1;
    }
    .footer {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 10px 0px 0px;
      border-top: 1px solid var(--color-border);
      height: 30px;
      background-color: var(--color-bg-secondary);
    }
    .result {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2px 4px 2px 15px;
      height: 24px;
      user-select: none;
      position: relative;
      border-radius: 4px;

      i {
        font-size: 13px;
        margin-left: 4px;
        transform: rotate(270deg);
      }

      &:hover {
        cursor: pointer;
        background-color: var(--color-hover-bg);
      }

      &::after {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 99px;
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--color-success);
      }
    }
    .unfoldResult {
      i {
        transform: rotate(90deg);
      }

      &::after {
        background-color: var(--custom-success-color);
      }
    }
    .reversalIconBox {
      transform: rotate(180deg);
    }

    .iconBox {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2px;
      font-size: 13px;
      height: 24px;
      width: 24px;
      border-radius: 4px;

      &:hover {
        cursor: pointer;
        background-color: var(--color-hover-bg);
      }
    }
  }
}
