/*
 *  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: max-content auto max-content;
      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 select {
         position: relative;
         appearance: none;
         cursor: pointer;

         padding: 0.6em;
         color: #fff;
         background-color: #222;
         border: none;
         border-radius: 0.3em;
         font-size: 100%;
         text-align: left;
      }
         .wp-block-event-maps .toolbar select::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(../images/icon_arrow.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            transform: rotate(90deg);
            filter: invert();
         }
         .wp-block-event-maps .toggle-legend {
            height: 100%;
            width: 2em;
            cursor: pointer;
         }
            .wp-block-event-maps .toggle-legend::before {
               content: '';
               display: block;
               height: 100%;
               background-image: url(../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(../images/icon_close.svg);
            }

   .wp-block-event-maps .maps {
      object-fit: contain;
      margin: 1.5em;
   }
   .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;
      }