@use "sass:map";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;

$params: (
   "padding": 30px 0,
   "background": global.$body-bg,
   "color": global.$body-color,
   "titles-color": global.$headings-color,
   "content-max-width": unset
);

@if global-variable-exists(c-exception-view404, components) {
   $keys: map.keys(components.$c-exception-view404);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("Exception:View404", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-exception-view404);
}

.#{component("Exception:View404", "class")} {
   padding: map.get($params, "padding");
   background: map.get($params, "background");
   color: map.get($params, "color");

   .page-404-content-new {
      max-width: map.get($params, "content-max-width");
      margin: 0 auto;

      > .wpj-col-4 {
         max-width: 120px;
      }

      .emoji {
         margin-top: 20px;
         font-size: 108px;
         font-weight: global.$font-weight-bold;
         opacity: .5;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      .title-default {
         color: map.get($params, "titles-color");
      }

      .btns > .wpj-col-center {
         display: flex;
         flex-wrap: wrap;
         max-width: unset;
         gap: global.$gap-width;
      }

      @media screen and (max-width: global.$md - 1) {
         > .wpj-col-4 {
            display: none;
         }
      }

      @media screen and (max-width: global.$xs - 1) {
         .w-btn-wrapper {
            width: 100%;
         }

         .btn {
            margin-right: 0;
            width: 100%;
         }
      }
   }
}
