content/assets/stylesheets/_utilities.scss

@use 'variables' as *;

@function repeat-str($str, $times) {
  @if $times <=0 {
    @return '';
  } @else {
    $result: '';

    @for $i from 1 through $times {
      $result: $result + $str + ' ';
    }

    @return $result;
  }
}

@mixin sidebar-fixed {
  overflow: auto;
  position: sticky;
  top: 0;
  height: 100vh;
  min-width: $sidebar-width;
}

@mixin code-color {
  color: $code-color;
  background-color: $code-background-color;
}

@mixin code-styles {
  @include code-color;
  word-wrap: normal;
  word-break: normal;
  white-space: pre;
}

.text-decoration-underline {
  text-decoration: underline;
}

.gl-font-base {
  font-size: 1rem;
}

.gl-w-3 {
  width: 1rem;
}

.gl-fill-red-800 {
  fill: $red-800;
}

.gl-fill-red-600 {
  fill: $red-600;
}

.gl-fill-orange-400 {
  fill: $orange-400;
}

.gl-fill-orange-300 {
  fill: $orange-300;
}

.gl-fill-blue-400 {
  fill: $blue-400;
}

.lg-w-20p {
  @media (min-width: $bp-lg) {
    width: 20%;
  }
}
.lg-w-70p {
  @media (min-width: $bp-lg) {
    width: 70%;
  }
}

.gl-top-0 {
  top: 0;
}

.gl-absolute {
  position: absolute;
}
.gl-relative {
  position: relative;
}
.gl-sticky {
  position: sticky;
}
.gl-lg-sticky {
  @media (min-width: $bp-lg) {
    position: sticky;
  }
}
.gl-md-sticky {
  @media (min-width: $bp-md) {
    position: sticky;
  }
}
.gl-sm-sticky {
  @media (min-width: $bp-sm) {
    position: sticky;
  }
}