@import '../../style/global.less';

@left-panel-prefix: ~'@{prefix}-left-panel';

.@{left-panel-prefix} {
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 0 16px 16px 16px;
  font-family: PingFang SC, Nunito Sans, sans-serif;

  &-list {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 400px;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
  }

  &-studio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-1);
    text-decoration: none;

    &-name {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 800;

      > svg {
        margin-right: 16px;
      }
    }
  }

  &-studio:not(.@{left-panel-prefix}-return-home) {
    display: block;
    height: 56px;
    line-height: 56px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 4px;
    margin: 8px 0;

    .@{left-panel-prefix}-studio-logo-active {
      display: none;
    }

    &:hover {
      background-color: var(--color-fill-1);

      .@{left-panel-prefix}-studio-logo {
        display: none;

        &-active {
          display: block;
        }
      }
    }
  }

  &-return-home {
    display: block;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    padding: 0 16px;
    height: 64px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border);
    transition: all 0.2s;
    cursor: pointer;

    .arco-icon-arrow-right,
    .arco-react-icon-arrow-right {
      color: var(--color-text-1);
      font-size: 18px;
    }

    &:hover {
      .arco-icon-arrow-right,
      .arco-react-icon-arrow-right {
        color: rgb(var(--primary-6));
      }
    }

    &.@{left-panel-prefix}-studio,
    &.@{left-panel-prefix}-home-external {
      border-bottom: none;
    }
  }

  &-item {
    cursor: pointer;
    position: relative;
    z-index: 2;
    padding: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;

    &::after {
      position: absolute;
      z-index: -1;
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: var(--color-fill-1);
      border-radius: 4px;
      left: 0;
      opacity: 0;
      transform: scale(0.94);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    &-logo {
      position: relative;
      width: 24px;
      height: 24px;
      margin-right: 16px;

      > span {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.25s ease-out;
      }

      &-common {
        opacity: 1;
      }

      &-active {
        opacity: 0;
      }
    }

    &-text {
      &-title {
        font-size: 16px;
        font-weight: 800;
        color: var(--color-text-1);
        margin: 0;
        transition: all 0.2s ease-out;
      }

      &-desc {
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 12px;
        color: var(--color-text-2);
        position: absolute;
        word-break: keep-all;
        transform: translateY(0);
        opacity: 0;
        transition: all 0.2s ease-out;
      }
    }
  }

  &-item:hover {
    &::after {
      opacity: 1;
      transform: scale(1);
    }

    .@{left-panel-prefix}-item-text {
      &-title {
        transform: translateY(-8px);
        color: var(--color-text-1);
      }

      &-desc {
        transform: translateY(-4px);
        opacity: 1;
      }
    }

    .@{left-panel-prefix}-item-logo {
      &-common {
        opacity: 0;
      }

      &-active {
        opacity: 1;
      }
    }
  }

  &-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-1);
    width: @navbar-height;
    height: @navbar-height;
    box-sizing: border-box;
    cursor: pointer;

    &-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }
  }

  &-trigger:hover {
    .@{left-panel-prefix}-trigger-icon {
      background-color: var(--color-fill-1);
    }
  }

  &-trigger:focus-visible {
    .@{left-panel-prefix}-trigger-icon {
      .aria-focus();
    }
  }

  &-trigger::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 1px;
    height: 24px;
    background-color: var(--color-border);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

// trigger animation
.@{left-panel-prefix}-down {
  &-enter,
  &-appear {
    opacity: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transform-origin: 0% 0%;
    transform: scale(0.55) translateY(-6px);
  }

  &-enter-active,
  &-appear-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    transform-origin: 0% 0%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  &-exit {
    opacity: 1;
    transform: scale(1) translateY(0);
    transform-origin: 0% 0%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  &-exit-active {
    opacity: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transform-origin: 0% 0%;
    transform: scale(0.55) translateY(-6px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

html.rtl {
  .@{left-panel-prefix} {
    direction: rtl;

    &-item-logo {
      margin-right: 0;
      margin-left: 16px;
    }

    &-return-home {
      .arco-icon-arrow-right,
      .arco-react-icon-arrow-right {
        transform: scaleX(-1);
      }
    }

    &-trigger::after {
      content: ' ';
      display: block;
      position: absolute;
      width: 1px;
      height: 24px;
      background-color: var(--color-border);
      right: inherit;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.@{left-panel-prefix}-mobile {
  .@{left-panel-prefix}-list {
    display: grid;
    grid-template-columns: 100%;
    padding: 8px;
    width: 260px;
  }

  &-trigger {
    width: @mobile-height;
    height: @mobile-height;

    .@{left-panel-prefix}-trigger-icon {
      transform: scale(0.8);
    }
  }
}