@use 'sass:map';
@use '../../../mx-core/src/base/colors';
@use '../../../mx-core/src/base/opacity';
@use '../../../mx-core/src/base/typography';

@mixin mx-key-value-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  .mx-key-value {
    @extend .rounded-x-sm;

    &-hover:hover {
      background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);
    }

    .mx-key {
      color: map.get($color-theme, onSurfaceVariant);
      .tooltip {
        color: map.get($color-theme, onSurfaceVariant);
      }
    }

    &-vertical {
      .mx-value {
        color: map.get($color-theme, onSurface);
      }
    }

    &-horizontal {
      .mx-value {
        color: map.get($color-theme, onSurfaceVariant);
      }
    }
  }
}

.mx-key-value-group {
  display: table;
  border-collapse: separate;
  border-spacing: 8px 4px;

  > .mx-key-value {
    &-horizontal {
      display: table-row !important;
      .mx-key,
      .mx-value {
        display: table-cell !important;
      }
      .mx-key {
        width: 1px;
        white-space: nowrap;
        padding-right: 8px;
      }
    }
  }
}