/* ==UserStyle==
@name           Nakama - Personalización
@description    Permite la configuración de ciertos aspectos visuales en Nakama.
@version        2026.04.16.10.35
@author         MetalTxus
@namespace      https://github.com/jesuscc1993/
@license        CC BY-SA 4.0
@preprocessor   less

@var text border-radius-md              "Redondeado (medio)"                                    1rem
@var text border-radius-lg              "Redondeado (grande)"                                   1rem
@var text content-width                 "Ancho de contenido"                                    65ch
@var text max-attachment-height         "Alto máximo de adjuntos"                               calc(100vh - 4rem)
@var text max-iframe-height             "Alto máximo de embebidos"                              calc(100vh - 4rem)
@var text post-button-height            "Alto de botones en posts"                              3rem
@var text post-button-padding           "Espaciado de botones en posts"                         0 1rem
@var text post-button-border-radius     "Redondeado de botones en posts"                        1.5rem
@var checkbox attachments-scrollbar     "Scrollbar en adjuntos"                                 0
@var checkbox hide-comment-footer       "Ocultar footers en los comentarios hasta hacer hover"  0
@var checkbox hide-emoji-reactions      "Ocultar reacciones emoji en los post"                  0
@var checkbox disable-seasons           "Deshabilitar efectos de estación"                      0

==/UserStyle== */
@-moz-document domain("nakama.social") {
  .container {
    max-width: @content-width;
  }

  .post {
    border-radius: @border-radius-lg;
  }

  .media-scroller li > *,
  .media-scroller li img,
  .media-scroller li audio,
  .media-scroller li video,
  .media-scroller li iframe {
    background: transparent;
    border-radius: @border-radius-md;
    max-height: @max-attachment-height;
  }

  .media-scroller li img {
    width: auto;
    margin: 0 auto;
  }

  .media-scroller iframe {
    max-height: @max-iframe-height;
  }

  .post-warning {
    max-height: none;
    border-radius: @border-radius-md;
  }

  .post-replies-link,
  .post-add-reaction-btn,
  .post-reaction {
    border-radius: @post-button-border-radius;
    height: @post-button-height;
    padding: @post-button-padding;
  }

  /* hide empty scrollers */
  media-scroller:empty {
    display: none;
  }

  /* horizontally center single attachment */
  .media-scroller[data-length="1"] {
    justify-content: center;
  }

  /* fix embed dimensions */
  .media-scroller:not([data-length="1"]) {
    li:not(.full-width) {
      audio,
      video,
      iframe:not([id*="twitter-widget"]) {
        max-width: calc(calc(100% / 2) - 0.25rem) !important;
      }
    }
  }

  .media-scroller:not([data-length="1"]):not([data-length="2"]) {
    padding-bottom: 0.25rem;
  }

  /* fix twitter embeds */
  .media-scroller {
    @tweet-width: calc(@content-width - 33.98px);

    li:has(iframe[id^="twitter-widget"]) {
      > *,
      iframe {
        border-radius: 12px;
      }
    }

    .twitter-tweet {
      margin: 0 auto !important;
    }

    &[data-length="1"] .twitter-tweet iframe {
      width: @tweet-width !important;
    }

    &:not([data-length="1"]) .twitter-tweet iframe {
      width: calc(@content-width / 2 - 20px) !important;
    }

    iframe[id*="twitter-widget"] {
      max-width: min(@tweet-width, 550px) !important;
      margin: 0 auto;
    }
  }

  html when (@attachments-scrollbar = 1) {
    .media-scroller {
      overflow-x: auto;
      scrollbar-width: initial !important;
    }

    .media-scroller::-webkit-scrollbar {
      display: block !important;
    }
  }

  body when (@hide-comment-footer = 1) {
    .comments .post {
      &:not(:hover) {
        .post-footer {
          display: none;
        }
      }
    }
  }

  body when (@hide-emoji-reactions = 1) {
    .post .post-reactions {
      display: none;
    }

    .comments .post .post-footer {
      display: none;
    }
  }

  body when (@disable-seasons = 1) {
    background-image: none !important;

    > canvas,
    #animateimage,
    #padoru {
      display: none !important;
    }
  }

  [role="tablist"] {
    display: none;
  }

  /* scrollbar */
  ::-webkit-scrollbar:horizontal,
  ::-webkit-scrollbar-corner,
  ::-webkit-scrollbar-track-piece {
    background: var(--surface-0) !important;
    border-radius: 8px !important;
  }

  ::-webkit-scrollbar {
    width: 17px !important;
    height: 17px !important;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--surface-primary);
    border: 3px solid var(--surface-0) !important;
    border-radius: 8px !important;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--hue), 30%, 30%);
  }
}