@globalRadius: 0.4em;
@globalBgColor: rgba(252, 252, 252, 0.8);
@globalBgLoadingColor: rgba(252, 252, 252, 1);
@headerBgColor: rgba(252, 252, 252, 0.8);
@footerBgColor: rgba(149, 149, 149, 0.7);
@footerBgLoadingColor: rgba(149, 149, 149, 1);
@globalBoxShadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
  0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12);
@backdropFilter: saturate(120%) blur(20px);
@globalTransition: opacity 250ms linear, background-color 250ms linear;

.has-bgimg {
  .isekai-bgimg {
    position: fixed;
    opacity: 0;
    transition: @globalTransition;

    z-index: -2;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }

  body {
    background: #f3f3f3;
  }

  #mw-content-container,
  #mw-content-block {
    background: none;
  }

  #mw-footer-container {
    background: none;
    background-color: @footerBgColor;

    &.bgimg-background-loading {
      background-color: @footerBgLoadingColor;
    }
  }

  #mw-content {
    background: none;
    border: none;
    border-bottom-left-radius: @globalRadius;
    border-bottom-right-radius: @globalRadius;
    box-shadow: @globalBoxShadow;

    background-color: @globalBgColor;

    &.bgimg-background-loading {
      background-color: @globalBgLoadingColor;
    }
  }

  #mw-header-container {
    background: @headerBgColor;

    &.bgimg-background-loading {
      background-color: @footerBgLoadingColor;
    }
  }

  #simpleSearch {
    background: rgba(0, 0, 0, 0.07);
    border: solid 1px #a2a9b1;
    box-shadow: none;

    #searchInput-container input[type="search"]:focus {
      background: #fff;
    }
  }

  @media screen and (max-width: 1099px) {
    body {
      background: none;
    }

    #mw-site-navigation .sidebar-chunk,
    #mw-related-navigation .sidebar-chunk {
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #mw-content {
      border-bottom-left-radius: 0em;
      border-bottom-right-radius: 0em;
    }

    #mw-header-container {
      background: #fff;
    }
  }

  @media screen and (min-width: 1100px) {
    #mw-site-navigation .sidebar-chunk,
    #mw-related-navigation .sidebar-chunk {
      border: none;
      border-radius: @globalRadius;
      box-shadow: @globalBoxShadow;

      background: @globalBgColor;

      &.bgimg-background-loading {
        background-color: @globalBgLoadingColor;
      }

      h3 {
        border-bottom: solid 1px #a2a9b1;
      }
    }
  }

  .comment-body textarea,
  .comment-preview {
    background: @globalBgColor;

    &.bgimg-background-loading {
      background-color: @globalBgLoadingColor;
    }
  }

  .comment-toolbar {
    background: @globalBgColor;

    &.bgimg-background-loading {
      background-color: @globalBgLoadingColor;
    }
  }

  &.bgimg-fallback {
    #mw-footer-container {
      --bgimg-overlay-color: @footerBgColor;
    }

    @media screen and (max-width: 1099px) {
      #mw-content {
        background: none !important;
      }
    }

    @media screen and (max-width: 1099px) {

      #mw-site-navigation .sidebar-chunk,
      #mw-related-navigation .sidebar-chunk {
        background: none !important;
      }
    }
  }
}