@import '../../shared-styles/index';

:host {
  display: flex;
  flex-direction: column;

  &.is-horizontal {
    flex-direction: row;

    > .nx-data-display__value {
      flex-grow: 1;
    }
  }

  &.is-horizontal-columns {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    > .nx-data-display__value {
      grid-column-end: span 6;
    }

    ::ng-deep > .nx-data-display__label {
      grid-column-end: span 6;
    }
  }

  &.is-horizontal,
  &.is-horizontal-columns {
    ::ng-deep > .nx-data-display__label {
      padding-right: 4px;

      &:after {
        display: inline;
        content: ':';
      }
    }

    @each $col in 3, 4, 8, 9 {
      &.nx-data-display__label-columns-#{$col} > ::ng-deep .nx-data-display__label {
        grid-column-end: span $col;
      }

      &.nx-data-display__label-columns-#{$col} > .nx-data-display__value {
        grid-column-end: span (12 - $col);
      }
    }
  }

  &.is-small {
    @include type-style(data-display-small);
  }

  &.is-medium {
    @include type-style(data-display-medium);
  }

  &.is-large {
    @include type-style(data-display-large);

    @include media-breakpoint-response(mobile) {
      @include type-style(data-display-large-mobile);
    }
  }
}
