site/src/pages/home/sections/Banner/style/motion.module.less
.wrapper {
  width: 601px;
  background: rgba(255, 255, 255, 20%);
  box-shadow: inset 0 0 0 1px rgba(58, 60, 70, 10%);
  backdrop-filter: blur(10px);
  border-radius: 8px;

  :global(.arco-badge-number) {
    box-shadow: 0 0 0 2px #fff !important;
  }
}

.header {
  padding: 9px 12px;
  display: flex;
  justify-content: center;
}

.top {
  padding: 0 24px 20px;
}

.bottom {
  height: 148px;
  display: grid;
  grid-template-columns: 153px 1.1fr 0.9fr;

  &-item {
    &-1 {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(43, 121, 255, 20%);
    }

    &-2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #0e42d2;
      background-image: linear-gradient(rgba(255, 255, 255, 10%) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 10%) 1px, transparent 1px);
      background-size: 5px 5px;
    }

    &-3 {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #282c34;
    }
  }
}

.top-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr 1.5fr;
  height: 154px;
  grid-gap: 20px;

  &-item {
    &-1,
    &-2 {
      height: 100%;
      display: grid;
      grid-auto-rows: auto 1fr;
      grid-gap: 20px;
    }

    &-3 {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    &-4 {
      height: 100%;
      display: grid;
      grid-auto-rows: 1fr auto;
      grid-gap: 12px;
    }
  }
}

.dots {
  display: flex;
  position: absolute;
  left: 12px;

  i {
    width: 8px;
    height: 8px;
    border-radius: 50%;

    &:nth-of-type(1) {
      background-color: #ff4a4a;
    }

    &:nth-of-type(2) {
      background-color: #ffb83d;
      margin: 0 4px;
    }

    &:nth-of-type(3) {
      background-color: #00c543;
    }
  }
}

.url {
  width: 168px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #86909c;
  font-size: 12px;
  line-height: 12px;
  background: #f7f8fa;
  border-radius: 3px;

  svg {
    margin-right: 4px;

    path {
      fill: #86909c;
    }
  }
}

.badge {
  display: flex;
  align-items: center;
  margin-bottom: 24px;

  &-icon {
    height: 12px;
  }

  &-text {
    font-size: 12px;
    line-height: 12px;
    color: #1d2129;
  }
}

.color-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

  &-item {
    transition: all 0.25s ease-in-out;

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 10%);
    }

    &:nth-of-type(1) {
      background: #0e42d2;
    }

    &:nth-of-type(2) {
      background: #165dff;
    }

    &:nth-of-type(3) {
      background: #4080ff;
    }

    &:nth-of-type(4) {
      background: #6aa1ff;
    }

    &:nth-of-type(5) {
      background: #94bfff;
    }

    &:nth-of-type(6) {
      background: #206ccf;
    }

    &:nth-of-type(7) {
      background: #3491fa;
    }

    &:nth-of-type(8) {
      background: #57a9fb;
    }

    &:nth-of-type(9) {
      background: #9fd4fd;
    }

    &:nth-of-type(10) {
      background: #c3e7fe;
    }

    &:nth-of-type(11) {
      background: #0aa5a8;
    }

    &:nth-of-type(12) {
      background: #0fc6c2;
    }

    &:nth-of-type(13) {
      background: #33d1c9;
    }

    &:nth-of-type(14) {
      background: #86e8dd;
    }

    &:nth-of-type(15) {
      background: #b5f4ea;
    }
  }
}

.rate {
  :global(.arco-rate) {
    &-character {
      &:not(:last-child) {
        margin-right: 2px;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  :global(.arco-icon) {
    width: 20px;
    height: 20px;
  }
}

.icon-font {
  width: 100%;
  height: 60px;
  position: relative;

  svg {
    position: absolute;
    transition: all 0.2s ease;

    path {
      transition: all 0.2s ease;
    }

    path:first-child {
      fill: #4e5969;
    }

    path:last-child {
      fill: #fff;
    }

    &:hover {
      path {
        fill: transparent;
        stroke: #5f00fb;
        stroke-width: 0.7px;
      }
    }
  }
}

.skeleton {
  width: 108px;

  :global(.arco-skeleton-header .arco-skeleton-image) {
    width: 24px;
    height: 24px;
    margin-right: 6px;
  }

  :global(.arco-skeleton-content .arco-skeleton-text-row) {
    height: 13px;

    &:not(:last-child) {
      margin-bottom: 8px;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.chart {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  &-bar {
    position: relative;
    background: var(--color-primary-light-2);
    border-radius: 1px;
    transition: all 0.3s ease;
    overflow: hidden;

    &::before,
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      transition: all 0.2s ease-out;
    }

    &::before {
      height: 45%;
      background: rgb(var(--primary-6));
    }

    &::after {
      height: 18%;
      background: var(--home-color-banner-chart-bar-after);
    }

    &:hover&::before,
    &:hover&::after {
      transform: scale(2);
    }
  }
}

.carousel {
  border-radius: 3px;
  overflow: hidden;

  :global(.arco-carousel) {
    &-indicator-wrapper-bottom {
      margin-bottom: -4px;
    }

    &-arrow-right {
      transform: scale(0.6);
      margin-top: -12px;
      margin-right: -10px;
    }

    &-arrow-left {
      transform: scale(0.6);
      margin-top: -12px;
      margin-left: -10px;
    }
  }
}

.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 60%);
  border-radius: 3px;
  color: #fff;
  box-sizing: border-box;
  transition: all 0.2s ease;

  &-large {
    width: 58px;
    height: 58px;
    font-size: 32px;
  }

  &-medium {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  &-small {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  &-mini {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }

  svg {
    display: inline-block;
  }

  path,
  circle {
    transition: all 0.2s ease;
  }

  &-active,
  &:hover {
    background: #fff;
    color: #0e42d2;
  }
}

.avatar-circle {
  border-radius: 50%;
  border-color: #fff;
}

body[arco-theme='dark'] {
  .wrapper {
    background: rgba(0, 0, 0, 20%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 8%);
  }

  .bottom-item-3 {
    background: rgba(40, 44, 52, 48%);
  }

  .url {
    background: rgba(255, 255, 255, 8%);
    color: rgba(255, 255, 255, 40%);

    svg {
      path {
        fill: rgba(255, 255, 255, 40%);
      }
    }
  }

  .badge {
    &-icon {
      path {
        fill: #fff;
      }
    }

    &-text {
      color: #fff;
    }
  }

  .icon-font {
    svg:not(:hover) {
      path:first-child {
        fill: #fff;
      }

      path:last-child {
        fill: #080809;
      }
    }
  }
}
