@use 'variable/breakpoint' as *;
@use 'mixins/amixin' as *;
.view-map {
  height: calc(100vh - 100px);
  .sidebar {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: column;
    z-index: 10;
    background-color: var(--mat-sys-background);
    box-shadow: var(--mat-sys-level1);
    .sidebar-wrapper {
      .viewport {
        height: 80vh;
        overflow: auto;
        border-right: 1px solid rgb(97 97 97 / 8%);
        @include scrollbar(var(--mat-sys-surface-dim));
        .list {
          border-radius: 10px;
          cursor: pointer;
          margin-bottom: 20px;
          box-shadow: var(--mat-sys-level1);
          background-color: var(--mat-sys-background);
          .media {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            border-radius: 4px;

            img {
              max-width: 100%;
              padding: 10px;
              object-fit: contain;
              box-shadow: 0 4px 10px 1px rgb(0 0 0 / 7%);
            }
          }

          .title {
            font-size: 14px;
          }
          .badge {
            ::ng-deep {
              ul,
              ol {
                margin: 0;
                padding: 0;
              }
              li {
                display: inline-block;
                list-style: none;
                font-size: 12px;
                line-height: 20px;
                padding: 0 6px;
                margin: 4px;
                border-radius: 16px;
                color: var(--mat-sys-on-primary);
                background-color: var(--mat-sys-primary);
              }
            }
          }

          .meta {
            .item {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  ::ng-deep {
    .mat-expansion-panel-header:not(.mat-expanded) {
      background-color: var(--mat-sys-surface-bright);
    }
    .mat-expansion-panel {
      box-shadow: none !important;
    }
    .mat-expansion-panel-body {
      padding: 0 0px 16px;
    }
  }

  .tools {
    position: absolute;
    z-index: 10;
    top: 0;
    background-color: var(--mat-sys-background);
    box-shadow: var(--mat-sys-level1);
  }

  .selected {
    &:after,
    &:before {
      content: '';
      position: absolute;
      width: 4px;
      height: 50%;
      top: 0;
      transform: translateY(50%);
      background: var(--mat-sys-primary);
    }

    &:after {
      left: 0;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    &:before {
      left: auto;
      right: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
  }

  .map-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    .loading-inner {
      position: absolute;
    }
  }

  @media #{$gt-md} {
    .tools {
      width: calc(100% - 460px);
    }
  }
}
