@import "./variables";

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

// Базовые классы, без брейкпоинтов
@each $abbr, $cssProp in map-merge($padding-map, $margin-map) {
  @each $name, $space in $spaces {
    @if type-of($cssProp) == 'list' {
      .cds-#{$abbr}-#{$name} {
        @each $prop in $cssProp {
          #{$prop}: $space !important;
        }
      }
    } @else {
      .cds-#{$abbr}-#{$name} {
        #{$cssProp}: $space !important;
      }
    }
  }
}

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

  @media (min-width: $width) {
    @each $abbr, $cssProp in map-merge($padding-map, $margin-map) {
      @each $name, $space in $spaces {
        @if type-of($cssProp) == 'list' {
          .#{$breakpoint}\:cds-#{$abbr}-#{$name} {
            @each $prop in $cssProp {
              #{$prop}: $space !important;
            }
          }
        } @else {
          .#{$breakpoint}\:cds-#{$abbr}-#{$name} {
            #{$cssProp}: $space !important;
          }
        }
      }
    }
  }
}

