/*
 *  Block: Event Maps
 *
 */

.wp-block-event-maps {
   display: grid;
   grid-template-rows: max-content auto;
   grid-gap: 2em;
   height: calc( 100vh - 3em );
   border: 1px solid rgba(0,0,0,0.2);
   background: #fff;
   padding: 0 !important;
   margin: 1.5em 0;
   scroll-margin: 1.5em;
}

   .wp-block-event-maps .toolbar {
      display: grid;
      grid-template-columns: auto 2em;
      grid-template-areas: 'select legend' 'selected selected';
      grid-gap: 1em;
      align-content: center;
      padding: 1.5em;
      border-bottom: 1px solid rgba(0,0,0,0.2);
   }
      .wp-block-event-maps .toolbar > * {
         align-self: center;
      }

      .wp-block-event-maps .toolbar .map-select {
         grid-area: select;
         position: relative;
      }
         .wp-block-event-maps .toolbar .map-select button {
            position: relative;
            appearance: none;
            cursor: pointer;

            padding: 0.6em 2em 0.6em 0.6em;
            color: #fff;
            background-color: #222;
            border: none;
            border-radius: 0.3em;
            font-size: 100%;
            text-align: left;
         }
            .wp-block-event-maps .toolbar .map-select button::after {
               content: '';
               display: block;
               position: absolute;
               top: 0;
               bottom: 0;
               right: 0.5em;
               width: 1em;
               height: 100%;
               margin: 0 auto;

               border: none;
               background-image: url(/wp-content/plugins/wp-plugin-floor-plans/images/icon_arrow.svg);
               background-size: contain;
               background-repeat: no-repeat;
               background-position: 50% 50%;
               transform: rotate(90deg);
               filter: invert();
            }
         .wp-block-event-maps .toolbar .map-select ul {
            display: none;
            background-color: #fff;
            box-shadow: 0 0 3px rgba(0,0,0,0.3);
            border-bottom-right-radius: 0.3em;
            border-bottom-left-radius: 0.3em;
         }
            .wp-block-event-maps .toolbar .map-select ul li a {
               text-wrap: nowrap;
               display: block;
               padding: 0.5em 0.7em;
               cursor: pointer;
            }
            .wp-block-event-maps .toolbar .map-select.open ul {
               position: absolute;
               top: 100%;
               z-index: 200;
               display: block;
            }
      .wp-block-event-maps .selected-room {
         grid-area: selected;
      }
         .wp-block-event-maps .selected-room a {
            margin-top: 0.2em;
            display: block;
         }
      .wp-block-event-maps .toggle-legend {
         grid-area: legend;
         height: 100%;
         width: 2em;
         cursor: pointer;
      }
         .wp-block-event-maps .toggle-legend::before {
            content: '';
            display: block;
            height: 100%;
            background-image: url(/wp-content/plugins/wp-plugin-floor-plans/images/icon_help.svg);
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: 30px 30px;
         }
         .wp-block-event-maps .toggle-legend.legend-open::before {
            background-image: url(/wp-content/plugins/wp-plugin-floor-plans/images/icon_close.svg);
         }

@media screen and (min-width:900px) {
   .wp-block-event-maps .toolbar {
      grid-template-columns: max-content auto 2em;
      grid-template-areas: 'select selected legend';
   }
}

   .wp-block-event-maps .maps {
      object-fit: contain;
      margin: 1.5em;
      overflow: hidden;
   }
   .wp-block-event-maps svg {
      width: 100%;
      height: 100%;
      contain: size;
   }
      .wp-block-event-maps svg :is([data-purpose="room"],[data-purpose="change-area"]),
      .wp-block-event-maps svg :is([data-purpose="room"],[data-purpose="change-area"]) > * {
         cursor: pointer;
      }
         .wp-block-event-maps svg [data-purpose="room"].is-active [data-purpose="room-area"] {
            animation-name: highlight;
            animation-duration: 2s;
            animation-direction: alternate;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
         }
         @keyframes highlight {
            0% { fill: var(--original-fill); }
            100% { fill: #d00; }
         }

      .wp-block-event-maps svg .has-title {
         cursor: help;
      }