assets/css/partials/sidebar.scss
#sidebar {
  display: none;
}

.sidebar-left,
.sidebar-right {
  #sidebar {
    display: block;
    @media #{$mg-large} {
      display: none;
    }

    @media #{$mq-large} {
      width: 23%;
      min-width: 268px;
      margin: 0 16px;
      height: inherit;
    }
  }
}

[data-theme="dark"] .sidebar-wrap {
  box-shadow: var(--shadow-card);
}

[data-theme="dark"] #mobile-nav .sidebar-wrap {
  box-shadow: 0 0 0 0;
}

.sidebar-wrapper-container {
  display: flex;
  flex-direction: column;
  &.sticky {
    max-height: calc(100vh - 40px);
    position: sticky;
    top: 20px;
  }
}

.sidebar-wrapper {
  transition: 0.3s;
  flex: 1;
  min-height: 0;
  display: flex;

  .aos-animate {
    transition-property: initial !important;

    &:hover {
      box-shadow: var(--shadow-card-hover);
    }
  }

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

.sidebar-wrap {
  width: 100%;
  border-radius: $post-radius;
  background: var(--color-wrap);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  interpolate-size: allow-keywords;
  flex: 1;
  min-height: 0;

  .hidden {
    display: none;
  }
}

.sidebar-author {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;

  img {
    display: block;
    min-width: 100px;
    min-height: 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transition: all 0.3s;
    opacity: 0;
    object-fit: cover;
    margin: 20px;
    box-shadow: 0 0 15px 5px var(--color-red-6-shadow);
    will-change: transform;

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

  img.lazyloaded {
    opacity: 1;
    animation: blur 0.8s forwards;
  }

  .sidebar-author-name {
    font-weight: bold;
    font-size: 20px;
    color: var(--red-2);
    margin: 12px;
  }

  .sidebar-description {
    color: var(--grey-7);
    margin: 0 20px;
  }
}

.sidebar-state {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  color: var(--red-0);
  opacity: 0.8;
  transition:
    opacity 0.5s,
    color 0.5s;

  &:hover {
    opacity: 1;
  }

  > div,
  > a {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    padding: 0 20px;

    div {
      margin: 4px 0;
    }
  }
}

.sidebar-state a {
  text-decoration: none;
  color: inherit;
}

.sidebar-state-article {
  border-right: 1px solid var(--red-1);
}

.sidebar-state-tag {
  border-left: 1px solid var(--red-1);
}

.sidebar-state-number {
  font-weight: bold;
  font-size: 20px;
}

.sidebar-social {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 70%;
  flex-wrap: wrap;

  div a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.sidebar-social-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 25px;

  @if $icon_font {
    font: 20px $font-icon;
  } @else {
    font: 20px var(--font-icon);
  }

  transition: transform 0.2s;
  will-change: transform;

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

@if index($social-keys, "email") {
  .icon-email {
    color: var(--red-2);
  }
}

@if index($social-keys, "github") {
  .icon-github {
    color: #191717;
  }

  [data-theme="dark"] .icon-github {
    color: #bc88ff;
  }
}

@if index($social-keys, "google") {
  .icon-google {
    color: #4285f4;
  }
}

@if index($social-keys, "facebook") {
  .icon-facebook {
    color: #3b5998;
  }
}

@if index($social-keys, "twitter") {
  .icon-twitter {
    color: #191717;
  }

  [data-theme="dark"] .icon-twitter {
    color: #bc88ff;
  }
}

@if index($social-keys, "instagram") {
  .icon-instagram {
    color: #e1306c;
  }
}

@if index($social-keys, "linkedin") {
  .icon-linkedin {
    color: #0e76a8;
  }
}

@if index($social-keys, "pinterest") {
  .icon-pinterest {
    color: #bd081c;
  }
}

@if index($social-keys, "youtube") {
  .icon-youtube {
    color: #ff0000;
  }
}

@if index($social-keys, "vimeo") {
  .icon-vimeo {
    color: #1ab7ea;
  }
}

@if index($social-keys, "flickr") {
  .icon-flickr {
    color: #ff0084;
  }
}

@if index($social-keys, "dribbble") {
  .icon-dribbble {
    color: #ea4c89;
  }
}

@if index($social-keys, "behance") {
  .icon-behance {
    color: #1769ff;
  }
}

@if index($social-keys, "bilibili") {
  .icon-bilibili {
    color: #00a1d6;
  }
}

@if index($social-keys, "weibo") {
  .icon-weibo {
    color: #e6162d;
  }
}

@if index($social-keys, "zhihu") {
  .icon-zhihu {
    color: #0084ff;
  }
}

@if index($social-keys, "reddit") {
  .icon-reddit {
    color: #ff4500;
  }
}

@if index($social-keys, "tumblr") {
  .icon-tumblr {
    color: #35465c;
  }
}

@if index($social-keys, "medium") {
  .icon-medium {
    color: #00ab6c;
  }
}

@if index($social-keys, "deviantart") {
  .icon-deviantart {
    color: #05cc47;
  }
}

@if index($social-keys, "stackoverflow") {
  .icon-stackoverflow {
    color: #f48024;
  }
}

@if index($social-keys, "keybase") {
  .icon-keybase {
    color: #33a0ff;
  }
}

@if index($social-keys, "telegram") {
  .icon-telegram {
    color: #0088cc;
  }
}

@if index($social-keys, "discord") {
  .icon-discord {
    color: #7289da;
  }
}

@if index($social-keys, "steam") {
  .icon-steam {
    color: #171a21;
  }

  [data-theme="dark"] .icon-steam {
    color: #bc88ff;
  }
}

@mixin menu-link {
  color: var(--color-link);
  opacity: 0.8;
  text-decoration: none;
  transition:
    opacity 0.2s,
    color 0.2s;
  display: block;
  padding: 10px 15px;
  font-weight: 700;
}

.sidebar-menu {
  margin: 20px 0;
  width: 100%;
}

.sidebar-menu-link-wrap {
  display: flex;
  position: relative;
  justify-content: center;
  border: 10px var(--color-red-3-shadow) double;
  transition:
    border 0.5s,
    background 0.5s,
    color 0.5s;
  width: 70%;
  max-width: 200px;
  margin: 8px auto;

  &:hover {
    border: 10px var(--color-h2-after) double;
  }

  &:hover .sidebar-menu-icon:before {
    transform: rotate(90deg) scale(1.1);
  }

  &:hover .sidebar-menu-icon {
    transform: scale(1.1);
  }

  &:hover .sidebar-menu-icon.rotate {
    transform: rotate(90deg) scale(1.1);
  }
}

.sidebar-menu-icon {
  @include menu-link;
  font-size: 24px;
  font-weight: 400;
  transition:
    transform 0.3s,
    color 0.3s,
    opacity 0.3s;
  will-change: transform;

  &.rotate {
    transform: rotate(90deg);
  }

  &:before {
    font-size: 24px;
    font-weight: 400;
    transform: rotate(90deg);
    transition: transform 0.3s;
    will-change: transform;
  }

  pointer-events: none;
  padding: 5px 5px;
  display: flex;
  align-items: center;
}

.sidebar-menu-link-dummy {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.sidebar-menu-link {
  @include menu-link;
  pointer-events: none;
}

.link-active {
  background: var(--red-0);
  border: 10px var(--color-wrap) double;
  box-shadow: var(--shadow-red-6-shadow);
  opacity: 0.8;

  &:hover {
    opacity: 1;
  }

  .sidebar-menu-link {
    color: #fff;
    opacity: 1;
  }

  .sidebar-menu-icon {
    opacity: 1;
    color: #fff;
  }
}

.sidebar-toc-wrapper {
  color: var(--color-link);
  flex: 1;
  min-height: 0;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  a {
    color: var(--color-link);
    text-decoration: none;
    opacity: 0.8;
    transition: 0.3s;

    &:hover {
      color: var(--red-0);
    }
  }

  & ul,
  & ol {
    margin-left: 16px;
    list-style: none;
  }

  nav > ol, nav > ul {
    margin-left: 0;
  }

  & li {
    margin: 8px 0;
    padding: 1px 0;

    &:before {
      content: "";
      width: 5px;
      height: 10px;
      background: var(--color-h2-after);
      display: inline-block;
      vertical-align: middle;
      margin-right: 12px;
      box-shadow: var(--shadow-red-6-shadow);
      opacity: 0.5;
      transition: 0.3s;
    }

    &:hover {
      &:before {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        opacity: 1;
      }
    }
  }

  nav > ul ul,
  nav > ol ol {
    transform: scaleY(0);
    height: 0;
    overflow: hidden;
    transition: 0.3s;
    transform-origin: top;

    > li:last-child {
      margin-bottom: 0;
    }
  }

  .active > ul,
  .current > ul,
  .active > ol,
  .current > ol {
    height: auto;
    transform: scaleY(1);
  }

  .active > a,
  .current > a {
    color: var(--red-0);
    opacity: 1;
  }

  li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.toc-title {
  letter-spacing: 2px;
  color: var(--grey-9);
  line-height: 1em;
  font-weight: bold;
  padding: 10px 0 12px;
}

.sidebar-btn-wrapper {
  display: flex;
  justify-content: center;

  .sidebar-toc-btn,
  .sidebar-common-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: var(--red-3);
    color: white;
    font-weight: bold;
    box-shadow: var(--shadow-red-6-shadow);
    border-radius: $tag-radius;
    margin: 20px;
    transition: 0.3s;
    will-change: transform;

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

    [data-theme="dark"] & {
      filter: brightness(0.8);
    }
  }

  .current {
    background: var(--red-1);
  }
}

.sidebar-common-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  overflow-y: auto;
  flex: 1;
  min-height: 0;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
}

.sidebar-toc-sidebar {
  width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px 20px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
