/**
 * Display utilities
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

// Exposed variables
$theme: null !default;

@each $breakpoint in map.keys(map.get($theme, 'breakpoint')) {
  @include breakpoints.up($breakpoint) {
    $infix: breakpoints.infix($breakpoint, map.get($theme, 'breakpoint'));

    .ecl-u-d#{$infix}-none {
      display: none !important;
    }

    .ecl-u-d#{$infix}-inline {
      display: inline !important;
    }

    .ecl-u-d#{$infix}-inline-block {
      display: inline-block !important;
    }

    .ecl-u-d#{$infix}-block {
      display: block !important;
    }

    .ecl-u-d#{$infix}-table {
      display: table !important;
    }

    .ecl-u-d#{$infix}-table-cell {
      display: table-cell !important;
    }

    .ecl-u-d#{$infix}-flex {
      display: flex !important;
    }

    .ecl-u-d#{$infix}-inline-flex {
      display: inline-flex !important;
    }

    .ecl-u-d#{$infix}-grid {
      display: grid !important;
    }
  }
}

/* Box sizing */
.ecl-u-box-sizing-content {
  box-sizing: content-box !important;
}

.ecl-u-box-sizing-border {
  box-sizing: border-box !important;
}
