@use 'sass:math';
@use 'variable/variable' as *;
@use 'variable/breakpoint' as *;
:host ::ng-deep {
  .amap-container {
    box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.07);
  }
  .amap-marker-content {
    line-height: 1;
  }
  .mark-card {
    padding: math.div($spacer, 4);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    white-space: normal;
    word-break: keep-all;
    position: relative;
    border-radius: 6px;
    min-width: 200px;
    font-size: 14px;
    background-color: var(--mat-sys-surface-container-lowest);
    box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.07);
    &.reverse {
      background-color: var(--mat-sys-primary);
      color: var(--mat-sys-on-primary);
      box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.07);
      .media {
        background-color: var(--mat-sys-on-primary);
        img {
          background-color: var(--mat-sys-surface-container-lowest);
        }
      }

      .sub-title,
      .meta {
        color: var(--mat-sys-on-primary);
      }
      .arrow {
        &.top {
          &:after {
            border-top-color: var(--mat-sys-primary) !important;
          }
        }
      }
    }
    .media {
      width: 80px;
      height: 80px;
      padding: 4px;
      border-radius: 6px;
      flex: 0 0 80px;
      box-sizing: border-box;
      img {
        width: 70px;
        height: 70px;
        object-fit: contain;
        padding: 4px;
      }
    }

    .media-body {
      min-width: 200px;
      .drawer {
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }

    li {
      list-style: none;
      display: inline-block;
      margin-right: 6px;
    }
    .arrow {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 11px;

      &.top {
        bottom: -11px;
        left: 50%;
        border-width: 11px;
        margin-left: -11px;

        border-bottom-width: 0;

        &:after {
          bottom: 1px;
          margin-left: -10px;
          content: ' ';
          border-bottom-width: 0;
          border-top-color: var(--mat-sys-surface-container-lowest) !important;
        }
      }

      &:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 10px;
      }
    }

    .media-body {
      width: 100%;

      div[class^='mat-h'] {
        line-height: 1;
      }

      .title {
        white-space: nowrap;
      }

      .meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      ol,
      ul {
        margin-left: 0;
      }
    }

    @media #{$xs} {
      min-width: 150px;

      .media {
        img {
          width: 40px;
        }
      }
    }
  }
  .mark {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: relative;
    background-color: var(--mat-sys-primary-fixed);
    &:after {
      content: '';
      display: block;
      width: 13px;
      height: 13px;
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background-color: var(--mat-sys-primary);
    }
  }
}

.set-fit-view {
  position: absolute;
  right: 20px;
  bottom: 40px;
  z-index: 2;
}
