@import "../css/ol.css" layer(plugin);

@layer components {
   .map {
      padding: 0 0;
      margin: 0 0;
      width: 100%;
      min-width: 300px;
      aspect-ratio: 1/ 1;
   }

   .landsdlogo {
      width: 25px;
      height: 25px;
      display: inline-flex;
      background: url(https://api.hkmapservice.gov.hk/mapapi/landsdlogo.jpg);
      background-size: 25px;
      margin-left: 4px;
   }

   .ol-attribution.ol-uncollapsible {
      bottom: 12px;
      background: transparent
   }

   .ol-attribution ul {
      font-size: 12px;
      font-family: sans-serif;
   }

   .ol-attribution a {
      color: black;
   }

   .copyrightDiv {
      display: inline-block;
      height: 1rem;
      line-height: 1rem;
      position: absolute;
      top: 50%;
      bottom: 5px;
      right: 40px;
      margin: 0 5px 0 0;
      padding: 0 4px;
      font-family: sans-serif;
      font-size: 12px;
      background-color: rgba(255, 255, 255, 0.7);
      color: #333;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      z-index: 1;
   }

   .details {
      height: 1.5rem;
      position: absolute;
      bottom: 5px;
      right: 40px;
      margin: 0 5px 0 0;
      padding: 0 4px;
      text-overflow: ellipsis;
      white-space: nowrap;
      z-index: 1;
   }

   a.details {
      color: blue;
      background-color: white;
      border: #333;
      font-size: 15px;
   }

   .ol-viewport {
      overflow: unset !important;
   }
}

@layer media_query{
   @media(max-width: 1199px) {
      .map{
         width: 300px;
         max-width: 100%;
      }
   }
}