@import "./variables";

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

@each $key, $value in $flex-properties {
  $prefix: map-get($value, 'name');
  $propertyMap: map-get($value, 'map');
  $cssProperty: map-get($value, 'property');

  // без брейкпоинтов
  @each $name, $propValue in $propertyMap {
    .cds-#{$prefix}#{$name} {
      #{$cssProperty}: $propValue !important;
    }
  }

  // брейкпоинты
  @each $breakpoint, $map in $grid-breakpoints {
    $width: map-get($map, 'width');

    @media (min-width: $width) {
      @each $name, $propValue in $propertyMap {
        .#{$breakpoint}\:cds-#{$prefix}#{$name} {
          #{$cssProperty}: $propValue !important;
        }
      }
    }
  }
}

