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

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

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

      &--selected {
        box-shadow: inset 0 0 1px 1px var(--xh-list-select-color);
        background: var(--xh-grid-tree-group-bg);
      }

      &.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;
        color: var(--xh-zone-grid-bottom-text-color);
        font-size: var(--xh-zone-grid-bottom-font-size-px);
        border-radius: 0 0 0 var(--xh-border-radius-px);
      }

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

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

    .xh-panel__content .xh-hframe {
      padding: var(--xh-pad-px);
      align-items: center;

      & > *:not(:last-child) {
        margin-right: var(--xh-pad-px);
      }
    }
  }

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