@import "./variables";

/*
 * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
 * Для всех утилитарных классов необходимо указывать !important
 * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
 * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
 */

@each $name, $index in $z-indexes {
  .#{$name} {
    z-index: $index !important;
  }
}

@each $name, $value in $widthHeight {
  .cds-h-#{$name} {
    height: $value !important;
  }

  .cds-w-#{$name} {
    width: $value !important;
  }

  .cds-max-h-#{$name} {
    max-height: $value !important;
  }

  .cds-max-w-#{$name} {
    max-width: $value !important;
  }

  .cds-min-h-#{$name} {
    min-height: $value !important;
  }

  .cds-min-w-#{$name} {
    min-width: $value !important;
  }
}


@each $breakpoint, $map in $grid-breakpoints {
  $width: map-get($map, 'width');

  @media (min-width: $width) {
    @each $name, $value in $widthHeight {
      .#{$breakpoint}\:cds-w-#{$name} {
        width: $value !important;
      }

      .#{$breakpoint}\:cds-min-w-#{$name} {
        min-width: $value !important;
      }

      .#{$breakpoint}\:cds-max-w-#{$name} {
        max-width: $value !important;
      }

      .#{$breakpoint}\:cds-h-#{$name} {
        height: $value !important;
      }

      .#{$breakpoint}\:cds-min-h-#{$name} {
        min-height: $value !important;
      }

      .#{$breakpoint}\:cds-max-h-#{$name} {
        max-height: $value !important;
      }
    }
  }
}
