if (hexo-config('sidebar.enable')) {
  .sidebar {
    layout-card();
    padding: 1rem;
    width: convert(hexo-config('sidebar.width') || '$sidebar-width');
    font-size: $font-size-sidebar;

    &--sticky {
      position: fixed;
      top: convert(hexo-config('sidebar.offsetTop') || '30px');
      z-index: $z-index0;
      transform: translateZ(0);
    }

    .hide {
      display: none;
    }

    &-wrap {
      width: convert(hexo-config('sidebar.width') || '$sidebar-width');

      if (hexo-config('sidebar.enable')) {
        float: convert(hexo-config('sidebar.position'));
      }
    }

    &-nav {
      padding-bottom: 1em;
      text-align: center;

      &-toc,
      &-ov {
        border-bottom: 1px solid var(--color-gray-150);
        padding: .3em .5em;
        color: var(--color-gray-800);
        transition: opacity .2s;

        &:hover {
          color: $sidebar-nav-text-hover-color;
          cursor: pointer;
        }
      }

      .current {
        border-color: $sidebar-nav-text-hover-color;
        color: $sidebar-nav-text-hover-color;
      }
    }

    &-toc {
      overflow: auto;
      position: relative;
      max-height: 70vh;

      if (hexo-config('toc.wrap')) {
        break-word();
      } else {
        white-space: nowrap;
      }

      if (!hexo-config('toc.expand_all')) {
        .toc-child {
          display: none;
        }

        .active > .toc-child {
          display: block;
        }

        .current > .toc-child {
          display: block;
        }
      }

      .active,
      .current {
        & > a {
          color: $orange-dark;
          transition: color .3s;
        }
      }

      ol,
      li {
        list-style: none;
      }

      ol {
        margin: 0;
        padding-left: 1em;
      }
    }

    &-ov {
      & > div + div {
        if (hexo-config('sidebar.horizon_line')) {
          border-top: 1px dashed var(--color-gray-300);
        }
      }

      if (hexo-config('author.enable')) {
        &-author {
          width: 100%;
          text-align: center;

          &__avatar {
            margin: 0 auto;
            width: 120px;
            height: 120px;

            &_img {
              opacity: hexo-config('author.avatar.opacity');

              if (hexo-config('author.avatar.rounded')) {
                border-radius: 50%;
              }
            }

            &:hover &_img {
              animation: convert('avatar-' + (hexo-config('author.avatar.animation') || 'turn')) .8s both ease-out;
            }

            if (hexo-config('author.avatar.animation') == 'shake') {
              @keyframes avatar-shake {
                0% {
                  transform: scale(1);
                }

                10%,
                20% {
                  transform: scale(.9) rotate(3deg);
                }

                30%,
                50%,
                70%,
                90% {
                  transform: scale(1.1) rotate(-3deg);
                }

                40%,
                60%,
                80% {
                  transform: scale(1.1) rotate(3deg);
                }

                100% {
                  transform: scale(1);
                }
              }
            } else if (hexo-config('author.avatar.animation') == 'turn') {
              @keyframes avatar-turn {
                100% {
                  transform: rotate(1turn);
                }
              }
            }
          }

          &__text {
            margin: .5rem 0 0;
            font-weight: $font-weight-bold;
          }
        }
      }

      if (hexo-config('social_setting.enable')) {
        &-social {
          padding: .5rem 0;
          text-align: center;

          &-item {
            display: inline-block;
            margin: .2rem;
            text-align: center;
            color: var(--color-gray-100);
            background-color: $sidebar-social-color;

            &:hover {
              color: var(--color-gray-100);
              background-color: $sidebar-social-hover-color;
            }

            if (hexo-config('social_setting.icon_only')) {
              border-radius: .75rem;
              padding: 0 .25rem;
              min-width: 1.5rem;
              height: 1.5rem;
              line-height: 1.5rem;
              transition: background-color .2s ease;
            } else {
              border-radius: 3px;
              padding: 0 .4rem;
              transition: color .2s ease, background-color .2s ease;

              &__icon,
              &__text {
                margin: 0 3px;
              }
            }
          }
        }
      }

      if (hexo-config('feed.enable')) {
        &-feed {
          padding: .5rem 0;
          text-align: center;

          &-icon {
            margin-right: .3em;
          }

          &-email,
          &-rss {
            display: inline-block;
            width: 50%;

            &__link {
              transition: color .2s ease;
            }

            &__icon {
              margin-right: .2rem;
            }
          }

          &-email__link {
            color: $sidebar-feed-email-color;

            &:hover {
              color: darken($sidebar-feed-email-color, 20%);
            }
          }

          &-rss__link {
            color: $sidebar-feed-rss-color;

            &:hover {
              color: darken($sidebar-feed-rss-color, 20%);
            }
          }
        }
      }

      &-state {
        padding: .5rem 0;
        text-align: center;

        &-item {
          display: inline-block;
          width: 33.3%;
          line-height: 1.5em;
          transition: color .2s ease;

          &:not(:last-child) {
            border-right: 1px dashed var(--color-gray-300);
          }

          &--posts {
            color: $sidebar-state-post-color;

            &:hover {
              color: darken($sidebar-state-post-color, 30%);
            }
          }

          &--categories {
            color: var(--color-gray-700);

            &:hover {
              color: var(--color-gray-900);
            }
          }

          &--tags {
            color: $sidebar-state-tag-color;

            &:hover {
              color: darken($sidebar-state-tag-color, 30%);
            }
          }

          &__count {
            font-weight: $font-weight-bold;
            color: var(--color-gray-950);
          }
        }
      }

      if (hexo-config('creative_commons.enable') && hexo-config('creative_commons.sidebar')) {
        &-cc {
          padding-top: .5rem;
          text-align: center;
        }
      }
    }

    if (hexo-config('reading_progress.enable')) {
      &-reading {
        overflow: hidden;
        margin-top: .5em;
        text-align: center;

        &-info {
          margin-bottom: .3em;
        }

        &-line {
          width: 100%;
          height: convert(hexo-config('reading_progress.height') || '1px');
          background-color: convert(hexo-config('reading_progress.color') || '#49b1f5');
          transition: transform .2s ease;
          transform: translateX(-100%);
        }
      }
    }
  }
}
