@mixin g-unit($cols: 1, $total-col-count: 12) {
  $width: calc( ( #{$cols} / #{$total-col-count} ) * 100%);

  width: $width;
  flex-basis: $width;
  max-width: $width;
  flex-grow: 0;
  flex-shrink: 1;
}

@mixin hover($background-color, $border-color, $color) {
  &:hover,
  &:active,
  &:focus {
    background-color: $background-color;
    border-color: $border-color;
    color: $color;
    text-decoration: none;
  }
}

@mixin hover-action($top, $border-width, $border-color, $background-color, $color) {
  &:hover,
  &:active,
  &:focus {
    top: $top;
    box-shadow: 0 $border-width 0 $border-color;
    background-color: $background-color;
    color: $color;
  }
}

@mixin arrange-in-block-grid($per-row: 5, $gutter: ru(1), $min-width: ru(8)) {
  display: flex;
  flex-wrap: wrap;
  margin-left: -$gutter;
  margin-top: -$gutter;

  > * {
    flex: 1 0 $min-width;
    margin-left: $gutter;
    margin-top: $gutter;

    $column-width: (100% / $per-row);

    @media ( min-width: $min-width * $per-row ) {
      flex: 1 0 calc(#{$column-width} - #{$gutter});
      min-width: calc(#{$column-width} - #{$gutter});
    }

    @for $i from 2 through $per-row {
      $screen-width: ($min-width * $i) + ($gutter * $i);
      $column-width: (100% / $i);

      @media ( min-width: $screen-width ) {
        flex: 1 0 calc(#{$column-width} - #{$gutter});
        max-width: calc(#{$column-width} - #{$gutter});
      }
    }
  }
}

/* stylelint-disable declaration-no-important */
@mixin sticky-disable {
  height: auto !important;
  > div {
    position: inherit !important;
    transform: none !important;
  }
}
/* stylelint-enable declaration-no-important */