:root {
   --floor-plan-hover-bg: #ff4040;
   --floor-plan-hover-fg: #000;
   --floor-plan-selected-bg: #4076ff;
   --floor-plan-selected-fg: #000;

   --floor-plan-toolbar-bg: var(--floor-plan-selected-bg);
   --floor-plan-toolbar-fg: var(--floor-plan-selected-fg);

   --floor-plan-border-radius: 3px;
   --floor-plan-box-shadow: 0 0 0.2em rgba(0,0,0,0.4);

   --floor-plan-font: 'Lato', 'Helvetica', 'Arial', sans-serif;
}

.wp-block-floor-plan {
   font-family: var(--floor-plan-font);
}

/*
 *  Block: Floor plan
 *
 */

.wp-block-floor-plan svg {
   display: none;
   margin: 0 auto;
}
.wp-block-floor-plan svg .area {
   cursor: pointer;
}
   .wp-block-floor-plan svg g.area:hover rect,
   svg rect.area:hover {
      fill: var(--floor-plan-hover-bg);
   }
   .wp-block-floor-plan svg g.area:hover text {
      fill: var(--floor-plan-hover-fg);
   }

   #floor_plan_modal .area.selected rect,
   #floor_plan_modal .area.selected,
   .wp-block-floor-plan svg g.area.selected rect,
   svg rect.area.selected {
      fill: var(--floor-plan-selected-bg) !important;
   }
   #floor_plan_modal .area.selected rect,
   #floor_plan_modal .area.selected,
   .wp-block-floor-plan svg g.area.selected text {
      fill: var(--floor-plan-selected-fg);
   }

/*  Filter  */

.wp-block-floor-plan .filter-areas:not(:empty) {
   margin-bottom: 2em;
}
   .wp-block-floor-plan .filter-areas > * {
      margin-right: 0.5em;
   }
   .wp-block-floor-plan .filter-areas input {
      padding: 0.6em;
      display: block;
      min-width: 60%;
      margin: 0 auto;
      margin-bottom: 0.3em;
      background-color: #fff;
      color: #222;
      border: none;
      border-radius: var(--floor-plan-border-radius);
      box-shadow: var(--floor-plan-box-shadow);
      font-size: 100%;
      text-align: center;
   }
   .wp-block-floor-plan .filter-areas a {
      color: var(--floor-plan-toolbar-fg);
      text-decoration: underline;
   }

/*  Area list  */
.wp-block-floor-plan .area-list {
   display: grid;
   grid-gap: 1em;
}
   .wp-block-floor-plan .area-list .area {
      cursor: pointer;
   }

   .wp-block-floor-plan .area-list .filtered {
      display: none;
   }

@media screen and (min-width:800px) {
   .wp-block-floor-plan .area-list {
      grid-template-columns: repeat(3, 1fr);
   }
}

/*  Area  */
.wp-block-floor-plan .area {
   background-color: #fff;
   border-radius: var(--floor-plan-border-radius);
   box-shadow: var(--floor-plan-box-shadow);
   padding: 1em;
}
   .wp-block-floor-plan div.area > :first-child { margin-top: 0; }
   .wp-block-floor-plan div.area > :last-child { margin-bottom: 0; }
   .wp-block-floor-plan div.area .title {
      font-weight: bold;
      letter-spacing: 0.04em;
      line-height: 1.3em;

      display: grid;
      grid-template-columns: auto max-content;
      align-items: start;
   }
      .wp-block-floor-plan div.area .title span.area-code {
         padding: 0 0.5em;
         margin-left: 0.5em;
         margin-bottom: 0.5em;
         background-color: var(--floor-plan-selected-bg);
         color: #fff;
         border-radius: var(--floor-plan-border-radius);
      }
   .wp-block-floor-plan div.area .content {
      font-size: 90%;
      color: rgba(0,0,0,0.7);
      line-height: 1.3em;
   }

/*
 *  Modal
 *
 */

#floor_plan_modal {
   position: fixed;
   z-index: 1000000;
   top: 0; /* var(--wp-admin--admin-bar--height); */
   right: 0;
   bottom: 0;
   left: 0;
   display: grid;
   grid-template-areas: "header" "map" "area";
   grid-template-rows: min-content auto min-content;
   background-color: #eee;
}
   #floor_plan_modal .header {
      grid-area: header;
      background-color: #fff;
      display: grid;
      grid-template-columns: auto min-content min-content max-content min-content;
   }
      #floor_plan_modal .header .title {
         font-weight: bold;
      }
      #floor_plan_modal .header > * {
         display: block;
         padding: 1em;
      }
         #floor_plan_modal .header > a {
            background-repeat: no-repeat;
            background-position: 50% 50%;
         }
            #floor_plan_modal .header .nav {
               background-image: url(images/icon_arrow.svg);
            }
               #floor_plan_modal .header .nav.prev {
                  transform: rotate(180deg);
               }
            #floor_plan_modal .header .close {
               background-image: url(images/icon_close.svg);
               margin-right: 1em;
            }
   #floor_plan_modal .floor-plan-svg {
      grid-area: map;
      height: 100%;
      display: grid;
   }
      #floor_plan_modal svg {
         display: block;
         width: 100%;
         height: 100%;
         padding: 2em;
      }
         #floor_plan_modal .area:not(.selection),
         #floor_plan_modal .area:not(.selection) rect {
            fill: #ddd;
         }

   #floor_plan_modal .area {
      grid-area: area;
      background-color: #fff;
      padding: 1em;
      box-shadow: none;
      border-radius: 0;
   }
      #floor_plan_modal .area .title {
         font-weight: bold;
         margin-bottom: 0;
      }
         #floor_plan_modal .area > .title {
            grid-template-columns: min-content auto max-content;
            align-items: center;
         }
         #floor_plan_modal .title span {
            align-content: middle;
         }
         #floor_plan_modal .title .area-code {
            margin-bottom: 0;
         }
         #floor_plan_modal .title .expand-area-information {
            height: 1em;
            padding: 1em;
            margin-right: 1em;
            background-image: url(images/icon_arrow.svg);
            background-repeat: no-repeat;
            background-position: 50% 50%;
            transform: rotate( 90deg );
            cursor: pointer;
         }
            #floor_plan_modal.area-information-expanded .title .expand-area-information {
               transform: rotate( -90deg );
            }
      #floor_plan_modal:not(.area-information-expanded) .area .content,
      #floor_plan_modal:not(.area-information-expanded) .area .meta {
         display: none;
      }
      #floor_plan_modal .content:not(:empty) {
         margin-top: 1em;
      }

@media screen and (min-width: 800px) {
   #floor_plan_modal {
      max-width: min(90%,1200px);
      max-height: 90%;
      margin: auto;
      box-shadow: var(--floor-plan-box-shadow);
      border-radius: var(--floor-plan-border-radius);
   }
}

#floor_plan_modal_bg {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.75);
	z-index: 10000;
}