/**
 * Copyright © 2016-2026 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import '../../../../../../../scss/constants';

div.tb-widget .tb-widget-content.tb-no-interaction {
  .tb-map {
    .leaflet-interactive, .leaflet-control {
      pointer-events: none;
    }
  }
}

.tb-map-container, .tb-map-layout {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
}

.tb-map-container {
  flex-direction: column;
  .leaflet-gl-layer.maplibregl-map {
    position: relative;
    z-index: 1;
  }
}

.tb-map-layout {
  &.tb-sidebar-left {
    flex-direction: row-reverse;
  }
  &.tb-sidebar-right {
    flex-direction: row;
  }
  .tb-map {
    position: relative;
    flex: 1;
    .leaflet-control-attribution {
      font-size: 0.6rem;
      background: rgba(255,255,255,0.5);
    }
    &.leaflet-touch {
      .leaflet-bar {
        border: 1px solid rgba(0,0,0,0.38);
        border-radius: 15px;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.32);
        background-color: #fff;
        position: relative;
        a {
          color: var(--tb-map-control-color, rgba(0, 0, 0, 0.54));
          border-bottom: none;
          position: relative;
          background-color: transparent;
          &.leaflet-disabled {
            pointer-events: none;
            color: var(--tb-map-control-disable-color, rgba(0, 0, 0, 0.18));
            > div:not(.material-icon-font):not(.tb-control-text) {
              background-color: var(--tb-map-control-disable-color, rgba(0, 0, 0, 0.18));
              svg {
                fill: var(--tb-map-control-disable-color, rgba(0, 0, 0, 0.18));
              }
            }
          }
          &:not(.leaflet-disabled) {
            &:hover, &.active {
              border-bottom: none;
              color: var(--tb-map-control-active-color, $tb-primary-color); // primary color
              &:before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background-color: var(--tb-map-control-hover-background-color, rgba(0, 105, 92));
                opacity: 0.1;
              }
            }
          }
          &:first-child {
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
          }
          &:last-child {
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
          }
          &.tb-control-button {
            &.tb-control-text-button {
              display: flex;
              width: auto;
              padding-right: 14px;
              padding-left: 2px;
              div.tb-control-text {
                width: auto;
                background: transparent;
                font-family: Roboto, "Helvetica Neue", sans-serif;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
              }
            }
            &:not(.leaflet-disabled) {
              &.active, &:hover {
                &:before {
                  border-radius: 15px;
                }
                > div:not(.tb-control-text):not(.tb-close) {
                  background-color: var(--tb-map-control-active-color, $tb-primary-color);
                  svg {
                    fill: var(--tb-map-control-active-color, $tb-primary-color);
                  }
                }
              }
              > div:not(.material-icon-font):not(.tb-control-text) {
                background-color: var(--tb-map-control-color, rgba(0, 0, 0, 0.54));
                svg {
                  fill: var(--tb-map-control-color, rgba(0, 0, 0, 0.54));
                }
              }
            }
            > div {
              width: 30px;
              height: 30px;
              line-height: 30px;
              mask-repeat: no-repeat;
              mask-position: center;
              &.tb-layers {
                mask-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 9.5L0.75 5L9 0.5L17.25 5L9 9.5ZM9 12.5L1.18125 8.24375L2.75625 7.38125L9 10.7938L15.2438 7.38125L16.8188 8.24375L9 12.5ZM9 15.5L1.18125 11.2438L2.75625 10.3813L9 13.7938L15.2438 10.3813L16.8188 11.2438L9 15.5Z"/></svg>');
              }
              &.tb-groups {
                mask-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M6 13.5C5.5875 13.5 5.2345 13.3533 4.941 13.0597C4.6475 12.7662 4.5005 12.413 4.5 12V3C4.5 2.5875 4.647 2.2345 4.941 1.941C5.235 1.6475 5.588 1.5005 6 1.5H15C15.4125 1.5 15.7657 1.647 16.0597 1.941C16.3538 2.235 16.5005 2.588 16.5 3V12C16.5 12.4125 16.3533 12.7657 16.0597 13.0597C15.7662 13.3538 15.413 13.5005 15 13.5H6ZM6 4.5H15V3H6V4.5ZM3 16.5C2.5875 16.5 2.2345 16.3533 1.941 16.0597C1.6475 15.7662 1.5005 15.413 1.5 15V4.5H3V15H13.5V16.5H3Z"/></svg>');
              }
              &.tb-remove {
                mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 14.25C4.5 14.6478 4.65804 15.0294 4.93934 15.3107C5.22064 15.592 5.60218 15.75 6 15.75H12C12.3978 15.75 12.7794 15.592 13.0607 15.3107C13.342 15.0294 13.5 14.6478 13.5 14.25V5.25H4.5V14.25ZM6 6.75H12V14.25H6V6.75ZM11.625 3L10.875 2.25H7.125L6.375 3H3.75V4.5H14.25V3H11.625Z"/></svg>');
              }
              &.tb-cut {
                mask-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.25 1.25L8.75 5.75L10.25 7.25L15.5 2V1.25M8 8.375C7.90054 8.375 7.80516 8.33549 7.73483 8.26517C7.66451 8.19484 7.625 8.09946 7.625 8C7.625 7.90054 7.66451 7.80516 7.73483 7.73483C7.80516 7.66451 7.90054 7.625 8 7.625C8.09946 7.625 8.19484 7.66451 8.26517 7.73483C8.33549 7.80516 8.375 7.90054 8.375 8C8.375 8.09946 8.33549 8.19484 8.26517 8.26517C8.19484 8.33549 8.09946 8.375 8 8.375ZM3.5 14C3.10218 14 2.72064 13.842 2.43934 13.5607C2.15804 13.2794 2 12.8978 2 12.5C2 11.6675 2.675 11 3.5 11C3.89782 11 4.27936 11.158 4.56066 11.4393C4.84196 11.7206 5 12.1022 5 12.5C5 13.3325 4.325 14 3.5 14ZM3.5 5C3.10218 5 2.72064 4.84196 2.43934 4.56066C2.15804 4.27936 2 3.89782 2 3.5C2 2.6675 2.675 2 3.5 2C3.89782 2 4.27936 2.15804 4.56066 2.43934C4.84196 2.72064 5 3.10218 5 3.5C5 4.3325 4.325 5 3.5 5ZM6.23 4.73C6.4025 4.355 6.5 3.9425 6.5 3.5C6.5 2.70435 6.18393 1.94129 5.62132 1.37868C5.05871 0.816071 4.29565 0.5 3.5 0.5C2.70435 0.5 1.94129 0.816071 1.37868 1.37868C0.816071 1.94129 0.5 2.70435 0.5 3.5C0.5 4.29565 0.816071 5.05871 1.37868 5.62132C1.94129 6.18393 2.70435 6.5 3.5 6.5C3.9425 6.5 4.355 6.4025 4.73 6.23L6.5 8L4.73 9.77C4.355 9.5975 3.9425 9.5 3.5 9.5C2.70435 9.5 1.94129 9.81607 1.37868 10.3787C0.816071 10.9413 0.5 11.7044 0.5 12.5C0.5 13.2956 0.816071 14.0587 1.37868 14.6213C1.94129 15.1839 2.70435 15.5 3.5 15.5C4.29565 15.5 5.05871 15.1839 5.62132 14.6213C6.18393 14.0587 6.5 13.2956 6.5 12.5C6.5 12.0575 6.4025 11.645 6.23 11.27L8 9.5L13.25 14.75H15.5V14L6.23 4.73Z"/></svg>');
              }
              &.tb-rotate {
                mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M1.77 1.7625C2.8575 0.675 4.35 0 6.0075 0C9.3225 0 12 2.685 12 6C12 9.315 9.3225 12 6.0075 12C3.21 12 0.8775 10.0875 0.21 7.5H1.77C2.385 9.2475 4.05 10.5 6.0075 10.5C8.49 10.5 10.5075 8.4825 10.5075 6C10.5075 3.5175 8.49 1.5 6.0075 1.5C4.7625 1.5 3.6525 2.0175 2.8425 2.835L5.2575 5.25H0.00749922V0L1.77 1.7625Z"/></svg>');
              }
              &.tb-drag-mode {
                mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"></path></svg>');
              }
              &.tb-place-marker {
                mask-image: url('data:image/svg+xml,<svg width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg"><path d="M6 0.5C3.0975 0.5 0.75 2.8475 0.75 5.75C0.75 9.6875 6 15.5 6 15.5C6 15.5 11.25 9.6875 11.25 5.75C11.25 2.8475 8.9025 0.5 6 0.5ZM6 7.625C4.965 7.625 4.125 6.785 4.125 5.75C4.125 4.715 4.965 3.875 6 3.875C7.035 3.875 7.875 4.715 7.875 5.75C7.875 6.785 7.035 7.625 6 7.625Z"/></svg>');
              }
              &.tb-draw-rectangle {
                mask-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 1.5H6V3H12V1.5H16.5V6H15V12H16.5V16.5H12V15H6V16.5H1.5V12H3V6H1.5V1.5ZM12 6V4.5H6V6H4.5V12H6V13.5H12V12H13.5V6H12ZM3 3V4.5H4.5V3H3ZM13.5 3V4.5H15V3H13.5ZM3 13.5V15H4.5V13.5H3ZM13.5 13.5V15H15V13.5H13.5Z"/></svg>');
              }
              &.tb-draw-polygon {
                mask-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 6V1.5H12V4.35L10.8 6H7.2L6 4.35V1.5H1.5V6H3V12H1.5V16.5H6V15H12V16.5H16.5V12H15V6H16.5ZM8.25 7.5H9.75V9H8.25V7.5ZM3 3H4.5V4.5H3V3ZM4.5 15H3V13.5H4.5V15ZM12 13.5H6V12H4.5V6H5.325L6.75 7.95V10.5H11.25V7.95L12.675 6H13.5V12H12V13.5ZM15 15H13.5V13.5H15V15ZM13.5 4.5V3H15V4.5H13.5Z"/></svg>');
              }
              &.tb-draw-circle {
                mask-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 6.75H14.9775C14.025 4.0575 11.4825 2.25 8.625 2.25C6.83479 2.25 5.1179 2.96116 3.85203 4.22703C2.58616 5.4929 1.875 7.20979 1.875 9C1.875 12.75 4.8975 15.75 8.625 15.75C11.4825 15.75 14.025 13.95 15 11.25H16.5M15 8.25V9.75H13.5V8.25M13.365 11.25C12.495 13.08 10.65 14.25 8.625 14.25C5.73 14.25 3.375 11.9025 3.375 9C3.375 6.105 5.73 3.75 8.625 3.75C10.65 3.75 12.495 4.9275 13.3575 6.75H12V11.25"/></svg>');
              }
              &.tb-draw-polyline {
                 mask-image: url('data:image/svg+xml,<svg height="18px" viewBox="0 -960 960 960" width="18px"  xmlns="http://www.w3.org/2000/svg"><path d="M600-96v-86L317-336H144v-216h152l112-132v-180h216v216H472L360-516v121l240 131v-48h216v216H600ZM480-720h72v-72h-72v72ZM216-408h72v-72h-72v72Zm456 240h72v-72h-72v72ZM516-755ZM252-444Zm455 240Z"/></svg>');
              }
              &.tb-close {
                background: #D12730;
                mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M14.25 4.8075L13.1925 3.75L9 7.9425L4.8075 3.75L3.75 4.8075L7.9425 9L3.75 13.1925L4.8075 14.25L9 10.0575L13.1925 14.25L14.25 13.1925L10.0575 9L14.25 4.8075Z"/></svg>');
              }
            }
          }
        }
      }
      .tb-map-bottom-toolbar {
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        .leaflet-bar {
          display: flex;
          flex-direction: row;
        }
      }

      .tb-map-top-toolbar {
        left: 52px;
        right: 52px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
        .leaflet-control {
          margin-top: 0;
        }
        a.tb-control-button {
          .tb-control-button-icon {
            background-clip: text;
          }
        }
      }
    }
    .leaflet-map-pane:not(.leaflet-zoom-anim) {
      .leaflet-marker-icon {
        &.tb-hoverable:not(.tb-selected) {
          svg {
            transition: filter 0.2s;
          }
        }
      }
      img.leaflet-marker-icon, path {
        &.tb-hoverable:not(.tb-selected) {
          transition: filter 0.2s;
        }
      }
    }
    .leaflet-marker-icon {
      &.tb-marker-div-icon {
        background: none;
        border: none;
        &.tb-draggable {
          cursor: move;
        }
        &.tb-hoverable:not(.tb-selected) {
          &:hover {
            svg {
              filter: brightness(1.3)
                      drop-shadow( 0 0 4px rgba(0,0,0,0.56))
                      drop-shadow( 0 0 4px rgba(255,255,255,0.56));
            }
          }
        }
        &.tb-selected {
          svg {
            filter: brightness(1.3)
                    drop-shadow( 0 0 2px rgba(0,0,0,.6))
                    drop-shadow( 0 0 4px rgba(255,255,255,.7))
                    drop-shadow( 0 0 6px rgba(0,0,0,.8))
                    drop-shadow( 0 0 8px rgba(255,255,255,.9));
          }
        }
      }
    }
    img.leaflet-marker-icon, path {
      &.tb-draggable {
        cursor: move;
      }
      &.tb-hoverable:not(.tb-selected) {
        &:hover {
          filter: brightness(1.3)
                  drop-shadow( 0 0 4px rgba(0,0,0,0.56))
                  drop-shadow( 0 0 4px rgba(255,255,255,0.56));
        }
      }
    }
    img.leaflet-marker-icon {
      &.tb-selected {
        filter: brightness(1.3)
                drop-shadow( 0 0 2px rgba(0,0,0,.6))
                drop-shadow( 0 0 4px rgba(255,255,255,.7))
                drop-shadow( 0 0 6px rgba(0,0,0,.8))
                drop-shadow( 0 0 8px rgba(255,255,255,.9));
      }
    }
    path {
      &.tb-selected:not(.tb-cut-mode) {
        filter: brightness(1.3)
                drop-shadow( 0 0 4px rgba(0,0,0,.4))
                drop-shadow( 0 0 4px rgba(255,255,255,.3))
                drop-shadow( 0 0 8px rgba(0,0,0,.6))
                drop-shadow( 0 0 8px rgba(255,255,255,.5));
      }
    }
    .tb-cluster-marker-container {
      border: none;
      background-color: transparent;
    }
    .tb-cluster-marker-element {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
    }
    .tb-marker-label, .tb-polygon-label, .tb-circle-label {
      border: none;
      background: none;
      box-shadow: none;
    }
    .tb-place-item-label {
      border: none;
      box-shadow: none;
      border-radius: 4px;
      background: rgba(0,0,0,0.56);
      backdrop-filter: blur(4px);
      padding: 4px 8px;
      color: #fff;
      font-family: Roboto, "Helvetica Neue", sans-serif;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
    }
  }
  .tb-map-sidebar {
    .tb-layers, .tb-groups {
      height: 100%;
      width: 220px;
      max-width: 220px;
      display: flex;
      flex-direction: column;
      .tb-layers-title-container {
        display: flex;
        padding: 4px 4px 4px 16px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        .tb-layers-title {
          color: rgba(0,0,0,0.87);
          font-size: 18px;
          font-style: normal;
          font-weight: 500;
          line-height: 24px;
        }
        button.tb-button-close {
          width: 40px;
          min-width: 40px;
          height: 40px;
          padding: 8px;
          color: rgba(0, 0, 0, 0.54);
        }
      }
      .tb-layers-container {
        display: flex;
        flex: 1;
        padding: 4px 16px 16px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;
        overflow: auto;
        .tb-layer-card {
          position: relative;
          height: 64px;
          min-height: 64px;
          align-self: stretch;
          .tb-layer-map {
            position: absolute;
            inset: 2px;
            border-radius: 2px;
            z-index: 0;
            .leaflet-control-attribution {
              display: none;
            }
          }
          input.tb-layer-button {
            position: absolute;
            left: 0;
            bottom: 0;
            clip: rect(0, 0, 0, 0);
            pointer-events: none;
            &:checked+label.tb-layer-label {
              border: 3px solid $tb-primary-color;
              box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
              margin: 0;
            }
          }
          label.tb-layer-label {
            position: absolute;
            inset: 0;
            cursor: pointer;
            border-radius: 2px;
            border: 1px solid rgba(0, 0, 0, 0.12);
            margin: 2px;
            &:hover {
              border: 3px solid $tb-primary-color;
              box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
              margin: 0;
            }
            > span {
              position: absolute;
              left: 0;
              bottom: 0;
              padding: 0 3px;
              border-radius: 0 2px 0 0;
              background: rgba(0, 0, 0, 0.56);
              color: #fff;
              font-size: 14px;
              font-style: normal;
              font-weight: 500;
              line-height: 20px;
              user-select: none;
            }
          }
        }
        .tb-group-checkbox {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 0;
          cursor: pointer;
          .tb-group-button {
            width: 20px;
            height: 20px;
            min-width: 20px;
            min-height: 20px;
            margin: 4px;
            cursor: pointer;
            accent-color: var(--mat-checkbox-selected-icon-color, var(--mat-app-primary));
          }
          .tb-group-label {
            padding-left: 12px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.76);
            user-select: none;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}