@import "./variables";

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

// Без брейкпоинтов
@each $name, $value in $displays {
  .cds-#{$name} {
    display: $value !important;
  }
}

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

@each $name, $value in $positions {
  .cds-#{$name} {
    position: $value !important;
  }
}

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

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

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

    @each $name, $value in $overflow {
      .#{$breakpoint}\:cds-overflow-#{$name} {
        overflow: $value !important;
      }
    }

    @each $name, $value in $visibility {
      .#{$breakpoint}\cds-#{$name} {
        visibility: $value !important;
      }
    }

    @each $name, $value in $positions {
      .#{$breakpoint}\:cds-#{$name} {
        position: $value !important;
      }
    }
  }
}
