@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.main-frame-page {
  @apply relative w-full h-full;
  min-width: $small-screen;

  .header {
    @apply flex items-center fixed top-0 right-0 w-full z-20;
    height: 64px;
    background: linear-gradient(90deg, #1d42ab, #2173dc, #1e93ff);
    padding-left: 20px;

    .logo {
      width: 200px;
    }

    .icon {
      font-size: 19px;
      color: #fff;
    }

    .refresh {
      @apply inline-flex justify-center items-center cursor-pointer;
      width: 64px;
      height: 64px;
      margin-left: 20px;
      transition: all 0.2s ease-in-out;

      &:hover {
        background: rgba(255, 255, 255, 0.07);
      }

      .icon {
        &.refreshing {
          animation: rotate 1s ease 0s;
        }
      }
    }

    .el-breadcrumb {
      @apply flex-1;
      margin-left: 10px;

      ::v-deep .el-breadcrumb__item {
        @media (max-width: 900px) {
          display: none;
        }
        
        .el-breadcrumb__inner {
          color: rgba(255, 255, 255, 0.7);
          font-size: 15px;
          &.is-link {
            font-weight: 400;
            &:hover {
              color: #fff;
            }
          }
        }

        .el-breadcrumb__separator {
          margin: 0 8px;
          color: rgba(255, 255, 255, 0.7);
        }

        &:last-child {
          .el-breadcrumb__inner {
            color: #fff;
          }
        }
      }
    }

    .data-big-screen,
    .fullscreen,
    .message,
    .help,
    .avatar {
      @apply inline-flex justify-center items-center cursor-pointer;
      width: 42px;
      height: 64px;
      transition: all 0.2s ease-in-out;
      margin: 0 3px;

      &:hover {
        background: rgba(255, 255, 255, 0.07);
      }
    }

    .avatar {
      width: 50px;
    }
  }

  .aside {
    @apply fixed top-0 left-0 min-h-full z-10;
    width: 80px;
    padding-top: 64px;
    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
    background: #fff;

    .menu {
      .item {
        @apply flex justify-center items-center relative cursor-pointer;
        height: 50px;
        color: #515a6e;
        transition: all 0.2s ease-in-out;

        &:hover {
          color: #2d8cf0;
        }

        &.active {
          background: #f0faff;
          color: #2d8cf0;

          &::after {
            content: "";
            display: block;
            width: 2px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            background: #2d8cf0;
          }
        }

        &.disabled {
          color: #ccc;
          cursor: not-allowed;
        }
      }
    }

    @media (max-width: $small-screen) {
      @apply w-full;
      height: 50px;
      min-height: auto;
      top: 64px;
      padding-top: 0;
      .menu {
        @apply flex justify-center h-full;
        .item {
          width: 64px;

          &.active {
            &::after {
              bottom: 0;
              top: auto;
              left: 0;
              width: 100%;
              height: 2px;
            }
          }
        }
      }
    }
  }

  .main {
    @apply absolute overflow-auto;
    background: #f5f7f9;
    left: 80px;
    top: 64px;
    width: calc(100% - 80px);
    height: calc(100% - 64px);

    &::-webkit-scrollbar-track {
      background-color: #fff !important;
    }

    &::-webkit-scrollbar-track:vertical {
      border-left: 1px solid #e8eaec;
    }

    @media (max-width: $small-screen) {
      left: 0;
      top: 114px;
      width: 100%;
      height: calc(100% - 114px);
    }
  }
}
