@import '../../../../../scss/styles.scss';

@layer payload-default {
  .json-cell {
    font-size: 1rem;
    line-height: base(1);
    border: 0;
    display: inline-flex;
    vertical-align: middle;
    background: var(--theme-elevation-150);
    color: var(--theme-elevation-800);
    border-radius: $style-radius-m;
    padding: 0 base(0.25);
    max-width: 99.9%;
    [dir='ltr'] & {
      padding-left: base(0.0875 + 0.25);
    }
    [dir='rtl'] & {
      padding-right: base(0.0875 + 0.25);
    }

    background: var(--theme-elevation-100);
    color: var(--theme-elevation-800);

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}