/**
 * @date: 2024/2/18
 * @author: 小红
 * @fileName: aside
 * @Description: 侧部栏
 */

@use "util";

.aside {
   .card {
    padding: 16px 23px;

    &:not(:first-child) {
      margin-top: 15px;
    }

    > .title {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 5px;

      > i {
        margin-right: 2px;
        font-size: 1.1rem;
      }
    }
  }

  &-user {
    text-align: center;

    > .avatar {
      width: 110px;
      height: 110px;
      border-radius: 70px;
      transition: transform .3s;
      margin: 0 auto;

      &:hover {
        filter: brightness(1.2);
        transform: rotate(360deg);
        cursor: var(--cursor-pointer);
      }
    }

    > .name {
      font-size: 1.5rem;
      margin: 6px 0 -5px 0;
    }

    > .data {
      display: table;
      margin: 14px 0 4px;
      table-layout: fixed;
      width: 100%;

      .item {
        display: table-cell;
      }

      .headline {
        font-size: 1rem;
      }

      .num {
        font-size: 1.4rem;
        color: var(--text-obs-color);
      }

    }

    > a > .button {
      width: 95%;
      margin: 0 auto;
      padding: 5px 10px;
    }

    .social {
      display: flex;
      justify-content: center;
      line-height: 1;
      margin: 15px 0 0;

      > .link {
        font-size: 1.35em;
        margin: 0 8px;
        transition: transform .3s;

        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }

  &-notice {
    > .title > i {
      color: rgb(246, 8, 8);
    }
  }

  &-category {
    > .title > i {
      color: #108aec;
    }

    > .content {
      > .link {
        display: flex;
        position: relative;
        flex-direction: row;
        padding: 3px 10px 3px 25px;

        &:hover {
          filter: hue-rotate(38deg);

          .name {
            transform: translateX(5px);
          }
        }

        &:before {
          position: absolute;
          top: 8px;
          left: 0;
          width: 14px;
          height: 14px;
          border: 4px solid var(--theme);
          border-radius: 50%;
          background: 0 0;
          content: "";
          cursor: var(--cursor-pointer);
          transition: border-color .3s, box-shadow .25s ease 0s;
        }

        > .name {
          width: 75%;
          margin-right: auto;
          transition: transform .3s;
        }

        > span {
          @include util.text-overflow;
        }
      }
    }
  }

  &-tags {
    > .title > i {
      color: #cf9128;
    }

    > .content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      > .link {
        transition: transform .2s;
        padding: 0 4px;

        > .num {
          font-size: 0.7rem;
        }

        &:hover {
          transform: translateY(-3px);
        }
      }
    }
  }

  &-webInfo {
    > .title > i {
      color: #30b786;
    }

    .content {
      > .item {
        padding: 5px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}