.xh-zone-mapper {
  width: 350px;
  height: 550px;

  &__zone-picker {
    padding: var(--xh-pad-px);
    background: var(--xh-bg-alt);
    border-top: var(--xh-border-solid);
    border-bottom: var(--xh-border-solid);

    &__zone-cell {
      display: flex;
      align-items: center;
      overflow: hidden;
      flex: 1;
      min-height: 30px;
      white-space: nowrap;
      padding: var(--xh-pad-half-px);
      background: var(--xh-bg);
      border: var(--xh-border-solid);
      cursor: pointer;

      & > span:not(:last-child) {
        margin-right: 3px;
      }

      &--selected {
        box-shadow:
          inset 0 0 0 1px var(--xh-intent-warning),
          inset 0 1px 1px var(--xh-intent-warning);
        background: var(--xh-intent-warning-trans1);
      }

      &.tl {
        font-size: var(--xh-zone-grid-top-font-size-px);
        color: var(--xh-zone-grid-top-text-color);
        border-radius: var(--xh-border-radius-px) 0 0 0;
      }

      &.tr {
        justify-content: flex-end;
        margin: 0 0 0 -1px;
        font-size: var(--xh-zone-grid-top-font-size-px);
        color: var(--xh-zone-grid-top-text-color);
        border-radius: 0 var(--xh-border-radius-px) 0 0;
      }

      &.bl {
        margin: -1px 0 0 0;
        font-size: var(--xh-zone-grid-bottom-font-size-px);
        color: var(--xh-zone-grid-bottom-text-color);
        border-radius: 0 0 0 var(--xh-border-radius-px);
      }

      &.br {
        justify-content: flex-end;
        margin: -1px 0 0 -1px;
        font-size: var(--xh-zone-grid-bottom-font-size-px);
        color: var(--xh-zone-grid-bottom-text-color);
        border-radius: 0 0 var(--xh-border-radius-px);
      }
    }
  }

  &__sort-picker {
    flex: none !important;
    border-top: var(--xh-border-solid);
  }

  &__intro-text {
    padding: var(--xh-pad-px) var(--xh-pad-px) 0 var(--xh-pad-px);
    font-size: var(--xh-font-size-small-px);

    .xh-icon {
      margin-right: 2px;
    }
  }
}