/*
  The cake's SCSS playground.
  Contains the styles to my AniList profile theme.
  https://anilist.co/user/cakes/

  Compile before use. (https://sass-lang.com/install)
*/

@use "sass:list";
@use "sass:map";

$background: #000;
$color: #fff;
$content: "Zilla Slab", "Train One", sans-serif;
$contentHighlight: "Zilla Slab Highlight", "Train One", sans-serif;
$contentRedactedS: "Redacted Script", cursive;
$contentRedactedB: "Redacted", serif;
$expressions: "https://downloads.haiiro.moe/profiles/haiiro/expressions/";

@function notchedBox($size, $disableSides: ()) {
  $notchSize: $size;
  $sides: ();
  $defaultSides: (
          "top_left": (
                  0% $notchSize,
                  $notchSize 0%,
          ),
          "top_right": (
                  calc(100% - #{$notchSize}) 0%,
                  100% $notchSize,
          ),
          "bottom_right": (
                  100% calc(100% - #{$notchSize}),
                  calc(100% - #{$notchSize}) 100%,
          ),
          "bottom_left": (
                  $notchSize 100%,
                  0% calc(100% - #{$notchSize}),
          ),
  );

  @if (list.index($disableSides, "top_left") == null) {
    $side: 0px;
    $sides: map.merge(
                    $sides,
                    (
                            "top_left": (
                                    0% $side,
                                    $side 0%,
                            ),
                    )
    );
  } @else {
    $sides: map.merge(
                    $sides,
                    (
                            "top_left": map.get($defaultSides, "top_left"),
                    )
    );
  }
  @if (list.index($disableSides, "top_right") == null) {
    $side: 0px;
    $sides: map.merge(
                    $sides,
                    (
                            "top_right": (
                                    calc(100% - #{$side}) 0%,
                                    100% $side,
                            ),
                    )
    );
  } @else {
    $sides: map.merge(
                    $sides,
                    (
                            "top_right": map.get($defaultSides, "top_right"),
                    )
    );
  }
  @if (list.index($disableSides, "bottom_right") == null) {
    $side: 0px;
    $sides: map.merge(
                    $sides,
                    (
                            "bottom_right": (
                                    100% calc(100% - #{$side}),
                                    calc(100% - #{$side}) 100%,
                            ),
                    )
    );
  } @else {
    $sides: map.merge(
                    $sides,
                    (
                            "bottom_right": map.get($defaultSides, "bottom_right"),
                    )
    );
  }
  @if (list.index($disableSides, "bottom_left") == null) {
    $side: 0px;
    $sides: map.merge(
                    $sides,
                    (
                            "bottom_left": (
                                    $side 100%,
                                    0% calc(100% - #{$side}),
                            ),
                    )
    );
  } @else {
    $sides: map.merge(
                    $sides,
                    (
                            "bottom_left": map.get($defaultSides, "bottom_left"),
                    )
    );
  }

  @return polygon(
                  map.get($sides, "top_left"),
                  map.get($sides, "top_right"),
                  map.get($sides, "bottom_right"),
                  map.get($sides, "bottom_left")
  );
}

@mixin repeat($string, $n) {
  $c: "";
  @for $i from 1 through $n {
    $c: $c + $string;
  }
  content: $c;
}

@import url("https://fonts.googleapis.com/css2?family=Redacted&family=Redacted+Script:wght@300;400;700&family=Train+One&family=Zilla+Slab+Highlight:wght@400;700&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

body {
  background-color: $background;
}

body,
:root,
.site-theme-dark,
.site-theme-contrast,
.user-page-unscoped.pink,
.site-theme-dark .user-page-unscoped.pink {
  --color-blue: 255, 255, 255;
}

.page-content {
  background-color: unset;
  color: $color;
  font-family: $content;
}

// Replace avatars
.avatar[href="/user/cakes/"] {
  background-image: url("#{$expressions}neutral.png") !important;
}

// NAVBAR
#nav,
#nav.hide,
#nav.transparent {
  background-image: linear-gradient(to bottom, $background, transparent);
  background-color: transparent;
  color: $color;
  top: 0;

  .wrap {
    max-width: unset;
    margin: 0;

    .logo {
      display: none;
    }

    .search {
      position: fixed;
      top: 3rem;
      right: 20px;
    }

    .user {
      position: fixed;
      top: 1rem;
      left: 20px;
    }

    .links {
      align-items: center;
      justify-content: space-evenly;

      .link {
        font-family: $content;
        font-size: 2.25rem;
        transition: none;
        padding: 0.25rem 1rem;

        $spacing: 5rem;

        &:nth-of-type(3) {
          margin-right: $spacing;
        }

        &:nth-of-type(4) {
          margin-left: $spacing;
        }

        &:hover {
          color: $background;
          background-color: $color;
        }
      }

      &::after,
      &::before {
        font-family: $content;
        font-size: 4rem;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: none;
        pointer-events: none;
      }

      &::after {
        content: "灰色";
        opacity: 0.4;
        transform: rotate(-12deg);
      }

      &::before {
        content: "haiiro";
      }
    }
  }
}

// Banner
.header-wrap {
  position: relative;

  .banner {
    background: unset !important;
    height: 650px;
    position: relative;
    overflow: hidden;

    .banner-content {
      display: block;
      position: relative;
      margin-left: 5em;

      .avatar, .name-wrapper, .follower-badge, .actions {
        margin: 0;
        padding: 0;
      }

      .avatar, .name-wrapper {
        margin-bottom: 1rem;
        position: absolute;
        left: calc(50% - 100px);
      }

      .avatar {
        max-width: 200px;
        max-height: 200px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 5px solid $color;
        background-color: $background;
        bottom: 80px;
        z-index: 30;
      }

      .name-wrapper {
        bottom: 35px;

        .name {
          font-family: $content;
          font-size: 4rem;
          margin: 0;
          padding: 0;
          text-transform: none;
          color: $color;
          text-align: center;
          width: 200px;
        }
      }

      // name next to follower-badge
      .follower-badge + .name-wrapper::after {
        content: "haiiro";
      }

      .follower-badge {
        display: inline-block;
        padding: 5px 10px;
        width: 150px;
        text-align: center;
        position: absolute;
        bottom: 280px;
        left: calc(50% - 75px);
        background-color: $color;
        color: $background;
        font-family: $content;
        font-size: 2rem;
        text-transform: none;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        clip-path: notchedBox(10px, (top_left, bottom_right));
        z-index: 20;
      }

      .actions {
        display: inline-block;

        .nav-btn {
          font-family: $content;
          font-size: 2rem;
          text-transform: none;
          color: $color;
          text-align: center;
          width: 200px;
          background-color: rgba($background, 0.25);
          border: 2px solid $color;
          border-radius: 0;
          padding: 0.5rem 1rem;
          margin: 0.5rem;
          transition: none;
          position: absolute;
          left: calc(50% - 100px);
          bottom: 0;

          &:hover {
            color: $background;
            background-color: $color;
          }
        }

        .dropdown {
          margin: 0;
          position: absolute;
          left: calc(50% + 50px);
          bottom: 70px;
          transition: none;
        }
      }
    }

    &::before {
      @include repeat("haiiro ", 300);
      position: absolute;
      top: 0;
      left: 0;
      background-color: $background;
      color: rgba($color, 0.1);
      font-family: $content;
      font-size: 4rem;
      z-index: 20;
      transform: scale(2.5) rotate(12deg);
      line-height: 3.5rem;
      opacity: 1;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to top, $background, transparent 50%);
      z-index: 20;
    }

    .container {
      z-index: 100;
    }
  }

  .nav-wrap {
    background: none;
    position: fixed;
    top: 37rem;
    left: 0;
    z-index: 100;
    width: auto;

    .nav.container {
      display: flex;
      flex-direction: column;
      text-align: initial;
      min-width: unset;
      padding-right: 0;
      width: auto;

      .link {
        font-family: $content;
        font-size: 2rem;
        position: relative;
        color: $color;

        &:nth-of-type(7), &:nth-of-type(8) {
          display: none;
        }

        &.router-link-active {
          font-family: $contentHighlight;

          &::before {
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            position: absolute;
            top: 2.5rem;
            left: -1rem;
            background-color: $color;
            border-radius: 50%;
          }
        }

        &:hover::before {
          content: "";
          width: 0.5rem;
          height: 0.5rem;
          position: absolute;
          top: 2.5rem;
          left: -1rem;
          border-radius: 50%;
          border: 1px solid $color;
        }
      }
    }
  }
}

// Content
.content.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 5rem;

  .overview {
    display: inline-block;
    max-width: 1000px;
    width: 100%;
    // Add padding on smaller screens
    @media screen and (max-width: 1300px) {
      padding: 0 10rem;
    }

    .section {
      &:first-of-type {
        .about {
          position: relative;

          .content-wrap {
            background: $color;
            color: $background !important;
            padding: 2rem;
            padding-top: 0;
            border-radius: 0;
            clip-path: notchedBox(10px, (top_left, bottom_right));

            // BIO CONTENT
            .markdown {
              > p:first-of-type {
                display: none;
              }
            }

            [data-type="delete"] {
              display: none;

              ~ p {
                display: none;
              }
            }

            [data-type="main_header"],
            [data-type="main_header"] a, {
              font-family: $contentHighlight;
              font-size: 5rem;
              text-transform: none;
              color: $background;
              margin: 0;
              padding: 0;
            }

            [data-type="main_subheader"],
            [data-type="main_subheader"] a {
              font-family: $content;
              font-size: 1.5rem;
              text-transform: none;
              color: $background;
              margin: 0;
              padding: 0;
            }
          }

          [data-type="content"] {
            font-size: 1.5rem;

            [data-type="redact"] {
              font-size: 0;

              &::after {
                content: attr(data-len);
                font-size: 1.5rem;
                font-family: $contentRedactedB;
              }
            }

            [data-type="warning"],
            [data-type="warning"] a {
              font-family: $contentHighlight;
              font-size: 2rem;
              text-transform: none;
              color: $background !important;
              margin-top: 30px;
              text-decoration: none !important;
            }

            :not([data-type="warning"]) {
              h3, h3 a {
                font-family: $content;
                font-size: 2rem;
                text-transform: none;
                color: $background;
                margin: 0;
                padding: 0;
                text-decoration: none !important;
              }

              a {
                color: rgba($background, 0.75);
                text-decoration: underline dashed;
                transition: none;

                &:hover {
                  color: $background;
                  text-decoration: underline solid;
                }
              }
            }


            > br {
              display: none;
            }
          }

          &::before {
            content: "";
            position: absolute;
            bottom: 8px;
            right: 8px;
            width: 35%;
            height: 100%;
            border-right: 3px dashed $background;
            border-bottom: 3px dashed $background;
            pointer-events: none;
            z-index: 1000;
          }

          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 10px;
            width: 3px;
            height: 60px;
            border-left: 3px dashed $background;
            pointer-events: none;
            z-index: 1000;
          }
        }

        .desktop {
          display: none;
        }
      }

      // Stats
      .stats-wrap {
        & > .list-stats {
          background-color: $color;
          border-radius: 0;
          clip-path: notchedBox(10px, (top_right, bottom_left));

          .stats-wrap {
            .stat {
              font-family: $content;

              .value {
                font-size: 1.5em;
                color: $background;
              }

              .label {
                font-size: 1em;
                color: rgba($background, 0.5);
              }
            }
          }

          .footer {
            display: none;
          }
        }
      }

      // Section headers
      .section-header {
        font-family: $content;
        font-weight: 600;
        font-size: 2.5rem;
        color: rgba($color, 0.65);
        margin-bottom: 1rem;
        text-transform: none;
      }

      // Write a status...
      .activity-edit {
        .markdown-editor {
          border-radius: 0;
          background-color: $color;
          color: $background;
          clip-path: notchedBox(10px, (top_left, bottom_right));

          & > div {
            &:hover {
              color: rgba($background, 0.4);
            }

            &[title="Link"],
            &[title="Image"],
            &[title="Youtube Video"],
            &[title="WebM Video"] {
              color: $background;

              &:hover {
                color: rgba($background, 0.4);
              }
            }
          }
        }

        .el-textarea {
          background: none;
          border-radius: 0;

          textarea {
            background: none;
            color: $color;
            font-family: $content;
            font-size: 1.4rem;
            border-radius: 0;
            border-bottom: $color 1px solid;
          }
        }

        .actions {
          .button {
            border-radius: 0;
            background-color: $color;
            clip-path: notchedBox(10px, (top_left, bottom_right));
            position: relative;
            transition: none;
            color: $color;
            font-family: $content;
            font-size: 0.9em;
            font-weight: 600;

            &::before {
              $borderSize: 2px;
              content: "";
              width: calc(100% - #{$borderSize});
              height: calc(100% - #{$borderSize});
              background-color: $background;
              position: absolute;
              top: calc(#{$borderSize} / 2);
              left: calc(#{$borderSize} / 2);
              border-radius: 0;
              clip-path: notchedBox(10px, (top_left, bottom_right));
              z-index: -1;
            }

            &:hover {
              color: $background;

              &::before {
                background-color: $color;
              }
            }

            &.cancel {
              background-color: rgba($color, 0.5);
              color: rgba($color, 0.5);

              &:hover {
                color: $background;
                background-color: rgba($color, 0.5);

                &::before {
                  background-color: rgba($color, 0.25);
                }
              }
            }
          }
        }
      }

      // Activities
      .activity-entry {
        position: relative;

        .wrap {
          // Media embeds
          .media-embed {
            .embed {
              border-radius: 0;
              background-color: $background;
              clip-path: notchedBox(10px, (top_left, bottom_right));
              position: relative;

              .wrap {
                color: $color;

                .title {
                  color: $color;
                  font-family: $contentHighlight;
                  font-size: 1.45rem;
                  font-weight: 600;
                }
              }

              &::after {
                content: "";
                position: absolute;
                top: 3px;
                right: 3px;
                width: 35%;
                height: calc(100% - 3px);
                pointer-events: none;
                border-top: 3px dashed $color;
                border-right: 3px dashed $color;
              }
            }
          }

          // Replies
          & ~ .reply-wrap {
            .reply {
              position: relative;
              overflow: hidden;
              border-radius: 0;
              clip-path: notchedBox(10px, (top_left, bottom_right));
              background: $color;

              &::before {
                $borderSize: 2px;
                content: "";
                width: calc(100% - #{$borderSize});
                height: calc(100% - #{$borderSize});
                background-color: $background;
                position: absolute;
                top: calc(#{$borderSize} / 2);
                left: calc(#{$borderSize} / 2);
                border-radius: 0;
                clip-path: notchedBox(10px, (top_left, bottom_right));
                z-index: -1;
              }

              .header {
                z-index: 10;

                .avatar {
                  height: calc(100% - 1px);
                  width: 100%;
                  max-width: 12rem;
                  position: absolute;
                  top: -1px;
                  left: 0;
                  background-size: contain;
                  background-repeat: no-repeat;
                  background-position: top left;
                  pointer-events: none;
                  cursor: default;
                  z-index: 100;
                }

                .name {
                  color: $color;
                  font-family: $contentHighlight;
                  font-weight: 600;
                  font-size: 1.6rem;
                  z-index: 100;
                  margin-left: 11rem;

                  &::before {
                    content: unset;
                  }

                  &::after {
                    content: " replied";
                  }

                  & ~ .donator-badge {
                    background: $color;
                    border-radius: 0;
                    clip-path: notchedBox(10px, (top_right, bottom_left));
                    color: $background;
                    padding: 2px 1.5rem;
                  }
                }

                & > .actions {
                  .users {
                    top: 10px;
                    background: none;
                    border-radius: 0;
                  }

                  .action {
                    color: rgba($color, 0.5);

                    &.likes .button {
                      color: rgba($color, 0.5);

                      svg {
                        stroke: rgba($color, 0.5);
                      }
                    }

                    &.likes .button.liked {
                      color: $color;
                    }
                  }
                }
              }

              .reply-markdown {
                color: $color;
                font-family: $content;
                font-size: 1.5rem;
                z-index: 100;
                margin-left: 11rem;

                .media-embed {
                  .embed {
                    border-radius: 0;
                    background-color: $color;
                    clip-path: notchedBox(10px, (top_left, bottom_right));
                    position: relative;

                    .wrap {
                      color: $background;

                      .title {
                        color: $background;
                        font-family: $contentHighlight;
                        font-size: 1.45rem;
                        font-weight: 600;
                      }
                    }

                    &::after {
                      content: "";
                      position: absolute;
                      top: 3px;
                      right: 3px;
                      width: 35%;
                      height: calc(100% - 3px);
                      pointer-events: none;
                      border-top: 3px dashed $background;
                      border-right: 3px dashed $background;
                    }
                  }
                }
              }
            }

            .el-dialog__wrapper {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;

              .el-dialog {
                margin: 0 !important;
                width: 100%;

                .el-dialog__body {
                  background: transparent !important;

                  .activity-edit {
                    .section-header,
                    .reply.preview {
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }

        // List updates
        &.activity-manga_list,
        &.activity-anime_list {
          .entry-dropdown {
            background: rgba($color, 0.5);
            transition: none;
            color: $background;

            svg {
              fill: $background;
            }
          }

          & > .wrap {
            background: none;
            border-radius: 0;

            & > .list {
              font-size: 1.6rem;
              grid-template-columns: 50px auto;
              height: 100%;
              min-height: 70px;
            }

            .cover {
              background-size: contain;
              background-position: center;
            }

            .details {
              .status {
                display: block;
                flex-direction: column;
                // disable flex growing elements to full width
                flex: 0 0 auto;

                .title {
                  display: inline;
                  width: auto;
                  color: rgba($color, 0.5) !important;
                  transition: none;
                  flex-grow: 0;

                  &::before {
                    content: "\A";
                    white-space: pre;
                  }

                  &:hover {
                    font-family: $contentHighlight;
                    font-weight: 600;
                    color: $color !important;
                  }
                }
              }
            }

            & > .actions {
              .action {
                color: rgba($color, 0.5);

                &.likes .button {
                  color: rgba($color, 0.5);

                  svg {
                    stroke: rgba($color, 0.5);
                  }
                }

                &.likes .button.liked {
                  color: $color;
                }
              }
            }

            .time {
              display: none;
            }
          }
        }

        // Text and message activities
        &.activity-text,
        &.activity-message {
          & > .wrap {
            background-color: $color;
            border-radius: 0;
            color: rgba($background, 0.7);

            &::after {
              content: "";
              position: absolute;
              top: 5px;
              width: 35%;
              height: calc(100% - 4px);
              pointer-events: none;
              border-top: 4px dashed $background;
            }

            .header .avatar {
              height: 100%;
              width: 100%;
              max-width: 13.5rem;
              position: absolute;
              top: 0;
              left: 0;
              background-size: contain;
              background-repeat: no-repeat;
              background-position: top left;
              pointer-events: none;
              cursor: default;
            }

            .header .name {
              color: $background;
              font-family: $contentHighlight;
              font-size: 1.5em;
              font-weight: 600;
              margin-left: 12rem;

              & ~ .donator-badge {
                background: $background;
                border-radius: 0;
                clip-path: notchedBox(10px, (top_left, bottom_right));
                color: $color;
                padding: 3px 1.5rem;
              }
            }

            .activity-markdown {
              color: $background;
              font-family: $content;
              font-size: 1.2em;
              font-weight: 400;
              margin-left: 12rem;

              h1,
              h2,
              h3,
              h4,
              h5,
              h6 {
                color: $background;
              }

              del[href="redacted_s"] {
                color: $background;
                font-family: $contentRedactedS;
                text-decoration: none;
                font-size: 0;

                &::after {
                  content: attr(data-text);
                  font-size: 16px;
                }
              }

              del[href="redacted_b"] {
                color: $background;
                font-family: $contentRedactedB;
                text-decoration: none;
                font-size: 0;

                &::after {
                  content: attr(data-text);
                  font-size: 16px;
                }
              }
            }

            // Date and actions
            & > .time {
              color: rgba($background, 0.5);
              font-family: $content;
              font-size: 1em;
              top: 15px;
              right: 15px;

              &:hover {
                background: none;
              }

              .action {
                &:hover {
                  color: rgba($background, 0.25);
                }
              }
            }

            & > .actions {
              bottom: 10px;
              right: 15px;

              .action {
                color: rgba($background, 0.5);

                &.likes .button {
                  color: rgba($background, 0.5);

                  svg {
                    stroke: rgba($background, 0.5);
                  }
                }

                &.likes .button.liked {
                  color: $background;
                }
              }
            }
          }

          .el-dialog__wrapper {
            .el-dialog {
              backdrop-filter: none !important;
              background: none !important;
              box-shadow: none;
              border-radius: 0;

              .el-dialog__body {
                background: $background !important;
                border-radius: 0;
                clip-path: notchedBox(10px, (top_left, bottom_right));
              }
            }
          }
        }

        // Activity posts
        &.activity-text {
          & > .wrap {
            clip-path: notchedBox(10px, (top_right, bottom_left));

            &::after {
              left: 5px;
              border-left: 4px dashed $background;
            }

            .header .name {
              &::after {
                content: " says";
              }
            }

            .activity-markdown {
              // Custom moods
              $moods: ("happy", "evil", "pout", "shocked", "sleepy", "woah");
              @each $mood in $moods {
                b[href="mood_#{$mood}"]::after {
                  content: "";
                  max-height: 13.5rem;
                  height: 100%;
                  width: 13.5rem;
                  position: absolute;
                  top: 0;
                  left: 0;
                  background-size: contain;
                  background-repeat: no-repeat;
                  background-position: top left;
                  background-image: url($expressions + "#{$mood}.png");
                }
              }
            }
          }
        }

        // Activity messages
        &.activity-message {
          & > .wrap {
            clip-path: notchedBox(10px, (top_left, bottom_right));

            &::after {
              right: 5px;
              border-right: 4px dashed $background;
            }
          }

          $msg-texts: (
                  "There's a new message from",
                  "Incoming message from",
                  "New message from user",
                  "Message from",
                  "Message from user",
                  "Delivered a new message from",
                  "Wow! A new message from",
                  "Inbound transmission from",
                  "Textual communication received from",
                  "An actual, real message from",
                  "Holy cow! A message from"
          );
          $listLength: length(
                  $list: $msg-texts,
          );
          @for $i from 1 to 50 {
            $randomIndex: random($listLength);
            $randomMsg: nth(
                    $list: $msg-texts,
                    $n: $randomIndex,
            );

            &:nth-of-type(1n + #{$i}) .header .name::before {
              content: "#{$randomMsg} ";
            }
          }
        }
      }
    }
  }
}

// Dropdowns
#nav {
  .browse-wrap {
    &:hover::after {
      content: unset !important;
    }

    .dropdown {
      display: none;
    }
  }

  .user {
    .notification-dot {
      display: block !important;
      width: 5px !important;
      height: 5px !important;
      font-size: 0 !important;
      pointer-events: none;
      background-color: red !important;
      border-radius: 50% !important;
      top: -40% !important;
      left: 0 !important;
      transition: none;

      canvas {
        display: none;
      }
    }

    .user-wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .dropdown {
        transition: none !important;
        right: unset;
        left: 0;
        background-color: $color;
        border-radius: 0;
        clip-path: notchedBox(10px, (top_left, bottom_right));
        font-family: $content;

        &::after {
          content: "";
          position: absolute;
          top: 5px;
          right: 5px;
          width: 35%;
          height: calc(100% - 4px);
          pointer-events: none;
          border-top: 4px dashed $background;
          border-right: 4px dashed $background;
        }

        .primary-links {
          .primary-link {
            color: $background;
            transition: none;
            width: auto;
            height: auto;
            grid-template-columns: auto;
            align-items: initial;
            font-size: 1.1em;

            &:hover {
              font-family: $contentHighlight;
              font-weight: 600;
            }
          }

          svg {
            display: none;
          }
        }

        .footer {
          background-color: $color;
          color: $background;

          .secondary-link {
            transition: none;

            &:hover {
              color: $background;
              font-family: $contentHighlight;
              font-weight: 600;
            }
          }
        }

        &::before {
          content: unset;
        }
      }

      &:hover {
        .dropdown {
          animation: none;
        }

        &::after {
        }

        & ~ .notification-dot {
          display: block;
          position: absolute;
          top: 200% !important;
          left: 210% !important;
        }
      }
    }

    .hohDismiss {
      display: none;
    }
  }
}

// Modals
div[aria-modal="true"] {
  background-color: rgba($background, 0.75);
  backdrop-filter: blur(5px);

  .el-message-box {
    background-color: $color;
    border-radius: 0;
    clip-path: notchedBox(10px, (top_left, bottom_right));
    font-family: $content;

    .el-message-box__header {
      font-family: $contentHighlight;
      font-weight: 600;

      .el-message-box__title {
        color: $background;
        font-size: 1.2em;
      }

      .el-message-box__headerbtn {
        i {
          color: $background;
          font-weight: 700;
        }
      }
    }

    .el-message-box__content {
      color: $background;
      font-size: 1em;

      .el-message-box__input {
        .el-input {
          background: none;
          border-radius: 0;
          color: $background;

          .el-input__inner {
            background: none;
            border-radius: 0;
            color: $background;
            border-bottom: 1px solid $background;
          }
        }

        .el-message-box__errormsg {
          font-weight: 600;
          font-size: 1em;
        }
      }
    }

    .el-message-box__btns {
      .el-button {
        font-family: $content;
        font-size: 0.9em;
        font-weight: 600;
        border-radius: 0;
        clip-path: notchedBox(10px, (top_right, bottom_left));
        background-color: $background;
        color: $background;
        transition: none;
        position: relative;

        &::after {
          $borderSize: 2px;
          content: "";
          width: calc(100% - #{$borderSize});
          height: calc(100% - #{$borderSize});
          position: absolute;
          top: calc($borderSize / 2);
          left: calc($borderSize / 2);
          pointer-events: none;
          background-color: $color;
          clip-path: notchedBox(10px, (top_right, bottom_left));
          z-index: -1;
        }

        &:hover {
          background-color: $background;
          color: $color;
          font-weight: 600;

          &::after {
            background-color: $background;
          }
        }

        &:not(.el-button--primary) {
          &:hover {
            background-color: rgba($background, 0.5);

            &::after {
              background-color: rgba($background, 0.5);
            }
          }
        }
      }
    }
  }
}

// List editor
.list-editor-wrap {
  @keyframes list-editor {
    0% {
      backdrop-filter: blur(0px);
      background-color: rgba($background, 0);
    }
    100% {
      backdrop-filter: blur(5px);
      background-color: rgba($background, 0.75);
    }
  }
  animation: list-editor 0.5s linear forwards;

  .list-editor {
    border-radius: 0;
    clip-path: notchedBox(10px, (top_left, bottom_right));
    background-color: $color;
    box-shadow: unset;

    &::after {
      content: "";
      position: absolute;
      bottom: 5px;
      left: 5px;
      width: 35%;
      height: 55%;
      pointer-events: none;
      border-bottom: 4px dashed $background;
      border-left: 4px dashed $background;
    }

    .el-dialog__header {
      .el-dialog__headerbtn {
        i {
          color: $background;
          font-weight: 700;
        }
      }
    }

    .el-dialog__body {
      .header {
        box-shadow: unset;

        &[data-src="null"] {
          .title {
            color: $background !important;
          }

          &::after {
            content: unset;
          }
        }

        .content {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: 0 30px;

          .cover {
            margin: 0;
            border-radius: 0;
            clip-path: notchedBox(10px, (top_right, bottom_left));
          }

          .title {
            color: $color;
            font-family: $contentHighlight;
            font-weight: 600;
            font-size: 1.5em;
          }

          .favorite {
            color: $background;
          }

          .save-btn {
            color: $background;
            background-color: $color;
            border-radius: 0;
            clip-path: notchedBox(10px, (top_right, bottom_left));
            font-family: $content;
            position: relative;

            &:hover {
              color: $color;
              background-color: $background;
            }
          }
        }

        &::after {
          background: linear-gradient(to top, $color, transparent 75%),
          linear-gradient(rgba($background, 0.7), rgba($background, 0.7));
        }
      }

      .body {
        background-color: $color;

        .input-wrap {
          .form {
            .input-title {
              color: $background;
              font-family: $content;
              font-weight: 600;
              font-size: 1.2em;
            }

            .el-select,
            .el-input-number {
              .el-input {
                background: none;
                border-radius: 0;
                color: $background;

                input {
                  background: none;
                  border-radius: 0;
                  color: $background;
                  border-bottom: 1px solid $background;
                }

                .el-input__suffix {
                  i {
                    color: $background;
                    font-weight: 600;
                  }
                }
              }

              .el-input-number__increase,
              .el-input-number__decrease {
                i {
                  color: $background;
                  font-weight: 600;
                }
              }
            }

            .el-date-editor {
              background: none;
              border-radius: 0;
              color: $background;

              input {
                background: none;
                border-radius: 0;
                color: $background;
                border-bottom: 1px solid $background;
              }

              .el-input__prefix {
                i {
                  color: $background;
                }
              }
            }

            .el-textarea {
              background: none;
              border-radius: 0;
              color: $background;

              textarea {
                background: none;
                border-radius: 0;
                color: $background;
                border-bottom: 1px solid $background;
              }
            }
          }
        }

        .checkbox-wrap {
          .input-title {
            color: $background;
            font-family: $content;
            font-weight: 600;
            font-size: 1.2em;
          }

          .checkbox {
            .el-checkbox__label {
              color: $background;
              font-family: $content;
              font-size: 0.975em;
            }

            .el-checkbox__input {
              .el-checkbox__inner {
                background: transparent;
                border-color: $background;
                border-radius: 0;
                transition: none;

                &::after {
                  transition: none;
                }
              }

              &.is-checked {
                .el-checkbox__inner {
                  background: $background;
                  border-color: $background;
                }
              }
            }
          }

          .delete-btn {
            color: $background;
            background-color: $background;
            border-radius: 0;
            clip-path: notchedBox(10px, (top_right, bottom_left));
            font-family: $content;
            font-size: 1em;
            position: relative;
            transition: none;

            &::after {
              content: "";
              clip-path: notchedBox(10px, (top_right, bottom_left));
              position: absolute;
              top: 1px;
              left: 1px;
              width: calc(100% - 2px);
              height: calc(100% - 2px);
              background-color: $color;
              z-index: -1;
            }

            &:hover {
              color: $color;

              &::after {
                background-color: $background;
              }
            }
          }
        }
      }
    }
  }
}

// Activity editor
.activity-entry {
  .el-dialog__wrapper {
    @keyframes activity-editor {
      0% {
        backdrop-filter: blur(0px);
        background-color: rgba($background, 0);
      }
      100% {
        backdrop-filter: blur(5px);
        background-color: rgba($background, 0.75);
      }
    }
    animation: activity-editor 0.5s linear forwards;
  }
}

// Cool transition for #app when modals are open
#app {
  .page-content {
    .header-wrap .banner {
      transition: transform 0.5s cubic-bezier(1, 0, 0, 1) !important;
      transform-origin: bottom center;
    }

    .content.container {
      transition: transform 0.5s cubic-bezier(1, 0, 0, 1) !important;
      transform-origin: top center;
    }
  }

  #nav {
    transition: top 0.5s cubic-bezier(1, 0, 0, 1) !important;
  }

  .header-wrap .nav-wrap {
    transition: left 0.5s cubic-bezier(1, 0, 0, 1);
  }
}

body.el-popup-parent--hidden {
  #app {
    .page-content {
      .header-wrap .banner {
        //transform: scale(0.95) !important;
      }

      .content.container {
        //transform: scale(0.95) !important;
      }
    }

    #nav {
      top: -100% !important;
    }

    .header-wrap .nav-wrap {
      left: -100%;
    }
  }
}

.v-modal {
  display: none;
}

// Toasts
.el-message {
  border-radius: 0;
  clip-path: notchedBox(10px, (top_right, bottom_left));
  font-family: $content;
  font-size: 1.2em;

  &::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 35%;
    height: calc(100% - 3px);
    border-top: 4px dashed $background;
    border-left: 4px dashed $background;
  }
}

// Popper arrows begone
.popper__arrow {
  display: none !important;
}

// Dropdowns
.el-dropdown-menu {
  border-radius: 0;
  clip-path: notchedBox(10px, (top_right, bottom_left));
  font-family: $content;
  font-size: 1.2em;
  background: $color !important;
  padding: 0;

  .el-dropdown-menu__item {
    padding: 5px 20px !important;
    color: $background;

    &:hover {
      background: $background !important;
      color: $color !important;
    }
  }
}

.activity-extras-dropdown {
  background-color: $background !important;
  color: $color !important;

  .el-dropdown-menu__item {
    padding: 5px 20px !important;
    color: $color !important;
    transition: none;

    .icon svg {
      color: $color !important;
      transition: none;
    }

    &:hover {
      background: $color !important;
      color: $background !important;

      .icon svg {
        color: $background !important;
      }
    }
  }
}

.section-header .el-dropdown {
  .el-dropdown-menu {
    background: none !important;
    clip-path: unset;
    color: rgba($color, 0.65) !important;
  }
}

// Load more button
.load-more {
  background-color: $color !important;
  color: $background !important;
  border-radius: 0;
  clip-path: notchedBox(10px, (top_right, bottom_left));
  font-family: $content;
  font-size: 1.2em;
  transition: none !important;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: $color;
    clip-path: notchedBox(10px, (top_right, bottom_left));
    z-index: -1;
  }

  &:hover {
    color: $color !important;

    &::after {
      background: $background;
    }
  }
}

// Media lists
.medialist.table {
  grid-template-columns: 300px auto;
  width: 100%;

  .filters-wrap {
    margin-left: 100px;

    .entry-filter.el-input {
      background: none;
      border-radius: 0;

      input {
        background: $color;
        border-radius: 0;
        color: $background;
        font-family: $content;
        font-size: 1.2em;
        clip-path: notchedBox(10px, (top_right, bottom_left));

        &::placeholder {
          color: inherit;
        }
      }

      .el-input__prefix {
        color: $background;
      }
    }

    .el-select {
      background: none;
      border-radius: 0;
      font-family: $content;
      font-size: 1.2em;
      clip-path: notchedBox(10px, (top_right, bottom_left));

      .el-input {
        background: none;
        border-radius: 0;

        .el-input__inner {
          background: $color;
          border-radius: 0;
          color: $background;

          &::placeholder {
            color: inherit;
          }
        }

        .el-input__suffix {
          .el-input__suffix-inner {
            i {
              color: $background;
            }
          }
        }
      }
    }

    .filters {
      .el-slider {
        .hohStepper {
          color: $color !important;
        }

        .el-slider__runway {
          background: $color;
        }

        .el-slider__button-wrapper {
          .el-slider__button {
            background: $color;
            border-radius: 0;
            clip-path: notchedBox(10px, (top_right, bottom_left));
          }
        }
      }

      .random-btn {
        background: none;
        border-radius: 0;
        color: $color;
        font-family: $content;
        font-size: 1.2em;
        clip-path: notchedBox(10px, (top_right, bottom_left));
        margin-left: calc(50% - 15px);

        &:hover {
          background: $color;
          color: $background;
        }
      }


    }

    .compare-btn, .hohButton {
      background: $color;
      border-radius: 0;
      color: $color;
      font-family: $content;
      font-size: 1em;
      clip-path: notchedBox(10px, (top_right, bottom_left));
      transition: none;
      position: relative;
      margin: 20px 0 0;
      width: 100%;
      text-align: center;
      justify-content: center;

      &::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        background: $background;
        clip-path: notchedBox(10px, (top_right, bottom_left));
        z-index: -1;
      }

      &:hover {
        color: $background !important;

        &::after {
          background: $color;
        }
      }
    }

    .hohExtraFilters {
      margin-top: 0 !important;
    }
  }

  .lists {
    .actions {
      .theme-switch {
        color: rgba($background, 0.5);
        background: $color;
        border-radius: 0;
        font-family: $content;
        font-size: 1em;
        clip-path: notchedBox(10px, (top_left, bottom_right));

        .active {
          color: $background;
        }
      }
    }

    .list-wrap {
      .section-name {
        font-family: $content;
        font-size: 1.5em;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid $color;
        padding: 10px 0;
      }

      .list-section {
        background: $background;
        box-shadow: none;
        border-radius: 0;

        .list-head {
        }

        .list-entries {
          .entry {
            background: $background;
            color: $color;

            .title a {
              color: inherit;

              &:hover {
                color: inherit;
              }
            }

            &:hover {
              background: $color;
              color: $background;

              .image {
                border-radius: 0;
                clip-path: notchedBox(10px, (top_right, bottom_left));

                &::before {
                  content: "No image.";
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-family: $contentHighlight;
                  font-size: 1.5em;
                  font-weight: 700;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: $color;
                  clip-path: notchedBox(10px, (top_right, bottom_left));
                  z-index: -1;
                }

                &::after {
                  content: "";
                  position: absolute;
                  top: 1px;
                  left: 1px;
                  width: calc(100% - 2px);
                  height: calc(100% - 2px);
                  background: inherit;
                  clip-path: notchedBox(10px, (top_right, bottom_left));
                  z-index: -1;
                }
              }
            }
          }
        }
      }
    }
  }
}

// Media list dropdowns
#app:has(.medialist) {
  ~ .el-select-dropdown {
    background: $background !important;
    color: $color !important;
    border-radius: 0;
    clip-path: notchedBox(10px, (top_left, bottom_right));
    margin: 0;

    .el-select-dropdown__list {
      padding: 0;

      .el-select-dropdown__item {
        padding: 5px 20px !important;
        color: $color !important;
        transition: none;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon svg {
          color: $color !important;
          transition: none;
        }

        &.hover {
          background: $color !important;
          color: $background !important;

          .icon svg {
            color: $background !important;
          }
        }
      }
    }
  }
}

// Favs
.content.container {
  & > .favourites {
    width: 85%;
    margin-left: 5%;
    margin-right: auto;
    pointer-events: none;

    .section-header {
      font-family: $content;
      font-size: 1.2em;
      color: $color;
      text-align: center;
    }

    .favourites-wrap {
      overflow: visible;
      pointer-events: none;
      border-radius: 0;
      background: none;

      .favourite {
        pointer-events: all;
        border-radius: 0;

        &::after {
          content: "";
          position: fixed;
          width: 230px;
          height: 270px;
          background-image: inherit;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          top: calc(50% - 165px);
          right: 90px;
          z-index: 1001 !important;
          opacity: 0;
          transition: opacity 0.2s ease-in-out;
        }

        &[style*="default.jpg"] {
          background-image: none !important;
          background-color: $color;
          color: $background;
          font-family: $contentHighlight;
          font-size: 1em;
          font-weight: 700;
          display: flex;
          align-items: center;
          justify-content: center;

          &::before {
            content: "No image.";
          }

          &:hover {
            &::after {
              content: "No image.";
              font-size: 2.5em;
              display: flex;
              align-items: center;
              justify-content: center;
              position: fixed;
              width: 230px;
              height: 270px;
              top: calc(50% - 165px);
              right: 90px;
              z-index: 1001 !important;
            }
          }
        }

        &:hover {
          &::after {
            opacity: 1;
          }
        }
      }
    }
  }
}

// Favs tooltips
.page-content:has(.user-page-unscoped[user]:not([type])) ~ .tooltip {
  transform: unset !important;
  box-shadow: none;
  position: fixed;
  left: unset;
  bottom: unset;
  width: 250px;
  height: 360px;
  top: calc(50% - 180px);
  right: 80px;
  background-color: $color;
  border-radius: 0;
  clip-path: notchedBox(10px, (top_right, bottom_left));
  z-index: 1000 !important;
  transition: opacity 0.2s ease-in-out;

  .title {
    background: none;
    border-radius: 0;
    padding-top: 300px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 0;
  }

  .title,
  .content {
    color: $background;
    font-family: $content;
    font-size: 1.2em;
    text-align: center;
  }

  &::after {
    content: unset;
  }

  &:not(:has(.content)) {
    height: 340px;

    .title {
      font-size: 1.5em;
    }
  }
}

// Generalized filter groups
.filter-group {
  .group-header {
    color: $color !important;
    font-family: $content;
    font-size: 1.2em;
    margin-top: 30px;
    padding-bottom: 5px;
    padding-left: 5px;
    border-bottom: 1px solid $color;
  }

  > span, > a {
    color: $color !important;
    font-size: 1.2em !important;
    font-family: $content !important;

    .hohCount {
      color: $color !important;
      font-family: $content;
    }
  }

  > span.active, > .router-link-active {
    background: none !important;
    font-family: $contentHighlight !important;
    font-weight: 700 !important;

    .count, .hohCount {
      color: $color !important;
      font-family: $content;
    }
  }

  ~ .hohStatsTrigger {
    display: none;
  }
}

// Stats
.user[type="anime"][page="tags"]:not(.hohSpecialPage) #regularAnimeTable, .user[type="manga"][page="tags"]:not(.hohSpecialPage) #regularMangaTable, .user[type="anime"][page="staff"]:not(.hohSpecialPage) #animeStaff, .user[type="anime"][page="studios"]:not(.hohSpecialPage) #animeStudios, .user[type="manga"][page="staff"]:not(.hohSpecialPage) #mangaStaff {
  display: none !important;
}

.content.container > .stats {
  width: calc(100% - 100px);
  margin-left: auto;

  .increase-stats {
    display: none;
  }

  .heading, .header {
    h3, h2, h1 {
      font-size: 1.5em;
      color: $color;
      font-family: $content;
    }

    .switch, .switches {
      color: $color;
      font-family: $content;
      font-size: 1.2em;
      border-radius: 0;
      background: none;
      height: auto;

      .options {
        .option {
          color: $color;
          border-radius: 0;
          background: none;
          border: 1px solid $color;
          padding: 5px 10px;
          margin: 0;
          transition: none;

          &:hover {
            background: $color;
            color: $background;
          }

          &.active {
            background: $color;
            color: $background;
          }
        }
      }
    }
  }

  section {
    &:nth-of-type(1) {
      .highlight {
        .circle {
          background: $color;
          border-radius: 0;
          clip-path: notchedBox(10px, (top_right, bottom_left));

          svg {
            color: $background;
          }
        }

        .value {
          color: $color;
          font-family: $content;
          font-size: 1.5em;
          font-weight: 700;
        }

        .label {
          color: rgba($color, 0.75);
          font-family: $content;
          font-size: .9em;
        }
      }
    }

    .bar-chart-wrap {
      border-radius: 0;
      background: none;

      .bar-chart {
        .bar {
          background: $color;
          border-radius: 0;
        }
      }

      .x-axis {
        background: rgba($color, 0.05);
      }
    }

    .pie-chart {
      background: none;
      border-radius: 0;

      .title {
        color: $color;
        font-family: $content;
        font-size: 1.2em;
        text-align: center;
      }

      .labels {
        .label-wrap {
          font-family: $content;
          font-size: 1em;
          border-radius: 0;

          .percent {
            border-radius: 0;
          }

          &[style*="rgb(255, 255, 255)"] {
            color: $background;

            .percent {
              background: rgba($background, 0.2);
            }
          }
        }
      }
    }

    .draggable {
      .horizontal-scroller {
        background: none;
        border-radius: 0;

        .line-chart-wrap {
          background: none;
          border-radius: 0;

          .line-chart {
            .area {
              fill: rgba($color, 0.05);
            }

            .point-label {
              fill: $color;
              font-family: $content;
            }
          }

          .x-axis {
            background: rgba($color, 0.05);

            .label {
              color: $color;
              font-family: $content;
              font-size: 1.1em;
            }
          }
        }
      }
    }
  }

  .stat-cards {
    .stat-card {
      background: none;
      border-radius: 0;
      box-shadow: none;
      margin: 0 0 10px 0;

      .title {
        background: none;
        border-radius: 0;
        color: $color;
        font-family: $content;
        font-size: 1.5em;
        padding: 10px 15px;
        border-bottom: 1px solid $color;
        width: 100%;
        margin-bottom: 25px;
      }

      .count {
        background: $color;
        color: $background;
        font-family: $content;
        font-size: 1em;
        top: 38px;
        right: 34px;
      }

      .wrap {
        .image {
          border-radius: 0;
          clip-path: notchedBox(10px, (top_left, bottom_right));

          &[style*="default.jpg"] {
            background: none !important;
          }

          &::after {
            content: "No image.";
            color: $background;
            font-family: $contentHighlight;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1em;
            font-weight: 700;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: $color;
            clip-path: notchedBox(10px, (top_left, bottom_right));
            z-index: 1;
          }

          &::before {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            background-image: inherit;
            background-size: cover;
            background-position: center;
            clip-path: notchedBox(10px, (top_left, bottom_right));
            z-index: 2;
          }
        }

        > .image {
          z-index: 100;
          clip-path: notchedBox(10px, (top_right, bottom_left));

          &::after {
            clip-path: notchedBox(10px, (top_right, bottom_left));
            font-size: 1.5em;
          }

          &::before {
            clip-path: notchedBox(10px, (top_right, bottom_left));
          }
        }

        .relations-wrap {
          background: none;

          .button {
            z-index: 100;
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            pointer-events: none;
            background: linear-gradient(to right, rgba($background, 1), transparent 15%);
            z-index: 99;
          }

          &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 100%;
            pointer-events: none;
            background: linear-gradient(to left, rgba($background, 1), transparent 15%);
            z-index: 99;
          }
        }
      }

      &.has-image {
        .relations-wrap {
          &::before {
            left: 154px;
          }
        }
      }
    }
  }
}

// Stats tooltips
.page-content:has(.stats) ~ .tooltip {
  background: $color;
  border-radius: 0;
  clip-path: notchedBox(10px, (top_right, bottom_left));
  font-family: $content;
  font-size: 1em;

  .title {
    background: none;
    border-radius: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 10px;
    color: $background;
    border-bottom: 3px dashed $background;
    text-align: center;
  }

  .content {
    color: $background;
  }

  &:not(:has(.content)) {
    .title {
      border-bottom: none;
    }
  }
}

// Social page
.user-social {
  width: calc(100% - 100px);

  .theme-switch {
    color: rgba($background, 0.5);
    background: $color;
    border-radius: 0;
    font-family: $content;
    font-size: 1em;
    clip-path: notchedBox(10px, (top_left, bottom_right));
    margin-left: auto;
    margin-right: auto;

    .active {
      color: $background;
    }
  }

  .filter-group {
    > span:nth-of-type(5), > span:nth-of-type(6), > span:nth-of-type(7) {
      display: none;
    }
  }

  .thread-card {
    background: $color;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 10px 0;
    clip-path: notchedBox(10px, (top_left, bottom_right));
    color: $background;

    .title {
      background: none;
      border-radius: 0;
      color: $background;
      font-family: $content;
      font-size: 1.5em;
      font-weight: 700;
      padding: 10px 15px;
      border-bottom: 1px solid $background;
      width: 100%;
      margin-bottom: 25px;
    }

    .body-preview {
      color: $background;
    }

    .footer {
      .name a span {
        color: rgba($background, .6);
      }

      .info {
        color: rgba($background, .6);
      }
    }
  }

  .comment-wrap {
    background: $color;
    border-radius: 0;
    clip-path: notchedBox(10px, (top_right, bottom_left));
    font-family: $content;
    font-size: 1em;
    color: $background;

    .comment {
      .header {
        .user {
          color: $background;
        }

        time {
          color: rgba($background, .6);
        }

        .actions {
          .button {
            color: rgba($background, .6);

            svg {
              stroke: rgba($background, .6);
            }
          }
        }
      }
    }
  }

  &.listView {
    .user-follow .wrap {
      display: flex !important;
    }

    .wrap {
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0 -10px;
      flex-direction: row;

      .follow-card {
        background: $color;
        position: relative;
        border-radius: 0;
        width: 320px;
        clip-path: notchedBox(10px, (top_left, bottom_right));

        .name {
          display: inline-flex;
          width: 240px;
          background: $color;
          border-radius: 0;
          color: $background !important;
          font-family: $content;
          font-size: 1.2em;
          justify-content: center;
          align-items: center;
          padding: 0 !important;
          margin: 0 0 0 80px !important;
        }
      }
    }
  }

  &:not(.listView) {
    .follow-card {
      background: none;
      border-radius: 0;
      clip-path: notchedBox(10px, (top_left, bottom_right));

      .name {
        background: rgba($color, .75);
        border-radius: 0;
        color: $background !important;
        font-family: $content;
        font-size: 1em;
        justify-content: center;
        align-items: center;
        position: absolute;
      }
    }

  }
}

// Full page search
.quick-search.visible {
  background-color: rgba($background, .75);
  backdrop-filter: blur(5px);

  .input {
    border-radius: 0;
    background: $color;
    color: $background;
    font-family: $content;
    font-size: 1.2em;
    clip-path: notchedBox(10px, (top_right, bottom_left));

    .icon {
      color: $background;
    }

    input {
      background: none;
      color: inherit;
      font-family: inherit;
      font-size: inherit;

      &::placeholder {
        font-size: 0;
      }
    }

    &::before {
      content: "Search";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: $content;
      font-size: 1.2em;
      color: $background;
      z-index: -1;
    }

    &:has(:focus-within) {
      &::before {
        content: "";
      }
    }
  }

  .results {
    .result-col {
      border-radius: 0;
      background-color: $color;
      color: $background;
      font-family: $content;
      font-size: 1.2em;
      clip-path: notchedBox(10px, (top_right, bottom_left));
      padding-top: 2em;
      position: relative;

      .title {
        color: $background;
        font-family: $content;
        font-size: 1.2em;
        position: absolute;
        top: 10px;
        left: 0;
        z-index: 100;
        border-bottom: black 2px solid;
        padding-left: 10px;
        width: 35%;
      }

      .result {
        transition: all .2s ease-in-out;
        border-radius: 0;

        &:first-of-type {
          margin-top: 10px;
        }

        .name {
          color: $background;
          font-family: $content;
          font-size: 1.2em;
        }

        .image {
          border-radius: 0;
          clip-path: notchedBox(10px, (top_right, bottom_left));
        }

        .info {
          color: $background;
          font-family: $content;
          font-size: 1em;
        }

        .open-list-editor {
          background: $background;
          color: $color;
        }

        .name, .info, .open-list-editor {
          transition: all .2s ease-in-out;
        }

        &:hover {
          background-color: $background;

          .name, .info {
            color: $color;
          }
        }
      }
    }
  }
}

// Footer
.footer {
  background: none !important;

  .container {
    justify-content: center;
  }

  .theme-selector {
    display: none;
  }

  .links {
    margin-left: unset;
    font-family: $content;
    font-size: 1em;

    a {
      color: $color;
      transition: none;

      &:hover {
        font-family: $contentHighlight;
        font-size: 0.99em;
      }
    }
  }
}

// Back to top
.progress {
  width: 0 !important;
  height: 0 !important;
  opacity: 1 !important;

  &::after {
    content: "▲";
    font-size: 1.2em;
    font-family: $content;
    color: $background;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background-color: $color;
    clip-path: notchedBox(10px, (top_right, bottom_left));
    z-index: 1000;
  }

  &:active {
    pointer-events: none;
  }

  &:active ~ .page-content {
    height: 0;
  }
}

// Loading animations
.header-wrap {
  .banner {
    height: 100vh;
    animation: loading-ani__header 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards 2.5s;

    .container {
      opacity: 0;
      animation: loading-ani__profile 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards 2.5s;
    }
  }

  .nav-wrap {
    left: -100%;
    animation: loading-ani__side-nav 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards 2.5s;
  }
}

#nav,
#nav.hide,
#nav.transparent {
  .wrap {
    .links {
      &::after,
      &::before {
        top: 625%;
        font-size: 15rem;
        animation: loading-ani__logo 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards 2.5s;
      }

      .link:nth-of-type(3) {
        margin-right: 0;
        animation: loading-ani__nav-right 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards 2.5s;
      }

      .link:nth-of-type(4) {
        margin-left: 0;
        animation: loading-ani__nav-left 0.3s cubic-bezier(0.86, 0, 0.07, 1) forwards 2.5s;
      }
    }
  }
}

body {
  overflow: hidden;
  animation: loading-ani__body 1ms linear forwards 2.8s;
}

@keyframes loading-ani__header {
  from {
    height: 100vh;
  }
  to {
    height: 650px;
  }
}

@keyframes loading-ani__logo {
  from {
    top: 625%;
    font-size: 15rem;
  }
  to {
    top: 0;
    font-size: 4rem;
  }
}

@keyframes loading-ani__side-nav {
  from {
    left: -100%;
  }
  to {
    left: 0;
  }
}

@keyframes loading-ani__profile {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes loading-ani__nav-right {
  from {
    margin-right: 0;
  }
  to {
    margin-right: 5rem;
  }
}

@keyframes loading-ani__nav-left {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 5rem;
  }
}

@keyframes loading-ani__body {
  from {
    overflow: hidden;
  }
  to {
    overflow: auto;
  }
}