@require 'variables.styl'
@require 'animated.styl'
@require 'redefine-theme.styl'

// MINXIN ======================================================================
redefine-tablet()
  @media (max-width $media-max-width)
    {block}

redefine-mobile()
  @media (max-width $media-max-width-mobile)
    {block}

// ALL ======================================================================
*
  transition-g()


// html, body
html, body
  position relative
  width 100%
  height 100%
  margin 0
  padding 0
  color var(--default-text-color)
  background var(--background-color)
  font-family $default-font-family
  font-weight $default-font-weight
  font-size $default-font-size
  line-height $default-line-height

  --navbar-height: $navbar-height

  // Tailwind's preflight font token lists the PLATFORM emoji fonts (Segoe UI
  // Emoji / Apple Color Emoji) ahead of Noto — override it so every
  // tailwind-fonted element resolves emoji to the Noto Color Emoji webfont.
  --font-sans: 'Geist Variable', 'Noto Sans SC', 'Noto Color Emoji', ui-sans-serif, system-ui, sans-serif

  // When scroll_progress.bar is enabled, hide system scrollbar but keep scroll functionality
  // This prevents scrollbar width changes when image-viewer opens/closes
  if (hexo-config('global.scroll_progress.bar') == true)
    scrollbar-width none // Firefox
    -ms-overflow-style none // IE/Edge
    &::-webkit-scrollbar
      display none // Chrome/Safari/Opera
  else
    // Custom scrollbar (only when not using progress bar)
    &::-webkit-scrollbar
      width 14px
      height 8px
      transition all 0.2s ease
      display block

    &::-webkit-scrollbar-thumb
      background var(--scrollbar-color)
      border-radius $redefine-border-radius-large
      background-clip content-box
      border 3px solid transparent

    &::-webkit-scrollbar-track
      background-color var(--scroll-bar-bg-color)
      border 1px solid var(--shadow-color-1)

    &::-webkit-scrollbar-thumb:hover
      background var(--scrollbar-color-hover)
      border-radius $redefine-border-radius-large
      background-clip content-box
      border 3px solid transparent

  +redefine-tablet()
    font-size: $default-font-size * 0.96
    line-height: $default-line-height * 0.96

  +redefine-mobile()
    font-size: $default-font-size * 0.9
    line-height: $default-line-height * 0.9

  .navbar-shrink
    --navbar-height: $navbar-shrink-height

// ======================================================================
// selection
// ======================================================================
::selection
  background var(--selection-color)
  color #fff

// ======================================================================
// ul, ol, li
// ======================================================================
ul, ol, li
  list-style none

// ======================================================================
// a
// ======================================================================
a
  text-decoration none
  color var(--default-text-color)

  i, span
    color var(--default-text-color)

  &:hover, &:active
    text-decoration none !important
    color var(--primary-color)

    i, span
      color var(--primary-color)

// ======================================================================
// img
// ======================================================================

// Image Preloader Styles
.img-preloader
  position relative
  display block
  max-width 100%
  width auto
  max-height $usr-img-max-height
  overflow hidden
  border-radius $redefine-border-radius-medium
  background-color var(--third-background-color)
  margin 1rem auto 1rem

  .img-preloader-skeleton
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background linear-gradient(
      90deg,
      var(--third-background-color) 0%,
      var(--second-background-color) 50%,
      var(--third-background-color) 100%
    )
    background-size 200% 100%
    animation img-preloader-shimmer 1.5s infinite ease-in-out
    border-radius inherit
    display flex
    flex-direction column
    align-items center
    justify-content center

  &.img-preloader-fade-out
    opacity 0
    transition opacity 0.2s ease

  &.img-preloader-error
    .img-preloader-skeleton
      animation none
      background var(--third-background-color)
      position relative
      height auto
      padding 0.75rem
      width 100%
      box-sizing border-box

    .img-preloader-error-icon
      font-size 3rem
      color var(--default-text-color)
      opacity 0.4
      margin-bottom 1rem

    .img-preloader-error-text
      text-align center
      color var(--default-text-color)
      opacity 0.6
      padding 0 20px
      font-size 0.85rem

      .error-message
        font-weight 500
        margin-bottom 0.5rem

      .error-url
        word-break break-all
        font-size 0.75rem
        opacity 0.7

.img-preloader-loaded
  animation img-preloader-fade-in 0.3s ease forwards

@keyframes img-preloader-shimmer
  0%
    background-position 200% 0
  100%
    background-position -200% 0

@keyframes img-preloader-fade-in
  from
    opacity 0
    transform scale(0.98)
  to
    opacity 1
    transform scale(1)

// ======================================================================
// button
// ======================================================================
button
  padding 0
  margin 0
  border 0
  outline none
  cursor pointer
  background transparent

.btn
  display inline-block
  position relative
  text-align center
  cursor pointer
  white-space nowrap
  padding 8px 16px
  background-color var(--second-background-color) !important
  border-radius $redefine-border-radius-medium !important
  padding 12px 16px !important
  text-decoration none !important
  redefine-container(
    false,
    0,
    0,
    0,
    1rem
  )
  box-shadow var(--redefine-box-shadow-flat) !important
  user-select none
  -moz-user-select none
  -webkit-user-select none
  -ms-user-select none
  hover-style(
    true,
    1.06,
    1.06
  )

  &:hover, &:focus
    color var(--primary-color)
    background-color var(--background-color) !important
    box-shadow var(--redefine-box-shadow) !important

  &:active
    box-shadow var(--redefine-box-shadow-flat) !important
    transform scale(0.95)
    transition transform 0.1s ease
    background-color var(--third-background-color) !important

// ======================================================================
// clear float
// ======================================================================
.clear
  clear both

// ======================================================================
// Noto animated emoji runtime (plugins/noto-anim.js).
//
// `.noto-anim > .noto-anim-box` holds the plain emoji TEXT (static Noto via the
// font stack — indistinguishable from normal text). While the emoji is in the
// viewport the runtime drops the animated WebP into that same box as an absolutely
// positioned overlay: no text node is removed, no layout ever changes.
//
// ── Geometry: no offsets, same box, centred ───────────────────────────────
// `line-height: 1` on the box makes its content area exactly 1em tall, and Noto's
// own metrics then place the emoji artwork centred in it — so "centre of the box"
// and "centre of the glyph" are the same point, both horizontally (the artwork is
// centred on its advance) and vertically. The overlay therefore just centres
// itself in the box: nothing to offset, nothing that can drift.
//
// --noto-art-size only matches the artwork's SIZE: the animated WebP carries
// transparent padding around its art (the 512px frame is the emoji's art board),
// so it has to be drawn slightly larger than 1em for its artwork to come out the
// same size as the glyph's.
// ======================================================================
:root
  --noto-art-size 1.179em
  --noto-fade 180ms

.noto-anim
  .noto-anim-box
    position relative
    display inline-block
    line-height 1
  img.noto-anim-img
    position absolute
    left 50%
    top 50%
    width var(--noto-art-size)
    height var(--noto-art-size)
    transform translate(-50%, -50%)
    max-width none
    margin 0
    pointer-events none
    user-select none
    // Survives the box being hidden underneath a fully-opaque overlay.
    visibility visible
    opacity 0
    transition opacity var(--noto-fade) linear
  // Fades in ON TOP of the still-opaque static glyph …
  &.is-anim img.noto-anim-img
    opacity 1
  // … which is only hidden once the overlay fully covers it.
  &.anim-on .noto-anim-box
    visibility hidden

@media (prefers-reduced-motion: reduce)
  .noto-anim img.noto-anim-img
    transition none