/* base
   ========================================================================== */

@if $enable-custom-properties {
  :root {

    // colors
    @each $color-name, $color-value in $colors {
      --color-#{$color-name}: #{$color-value};
    }

    // container
    --container-width: #{$container-width};

    // grid gutters
    @if type-of($grid-gutter-width) == "map" {
      @each $grid-gutter-width-key, $grid-gutter-width-value in $grid-gutter-width {
        @if $grid-gutter-width-key == "default" {
          --grid-gutter-width: #{rem($grid-gutter-width-value)};
        } @else {
          @media (max-width: bp($grid-gutter-width-key)) {
            --grid-gutter-width: #{rem($grid-gutter-width-value)};
          }
        }
      }
    } @else {
      --grid-gutter-width: #{rem($grid-gutter-width)};
    }

    // grid offsets
    @if type-of($grid-offset-width) == "map" {
      @each $grid-offset-width-key, $grid-offset-width-value in $grid-offset-width {
        @if $grid-offset-width-key == "default" {
          --grid-offset-width: #{rem($grid-offset-width-value)};
        } @else {
          @media (max-width: bp($grid-offset-width-key)) {
            --grid-offset-width: #{rem($grid-offset-width-value)};
          }
        }
      }
    } @else {
      --grid-offset-width: #{rem($grid-offset-width)};
    }
  }
}

p,
address,
ul,
ol,
dl,
dd,
blockquote,
pre,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: spacer(md);
  margin-bottom: 0;

  &:first-child {
    margin-top: 0;
  }
}

img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video,
svg {
  max-width: 100%;
}

img {
  height: auto;
  vertical-align: middle;
}

ul,
ol {
  padding-left: spacer(md);
}

em,
address,
cite,
i,
var {
  font-style: italic;
}

blockquote,
figure {
  margin-right: 0;
  margin-left: 0;
}

code,
pre,
samp,
kbd {
  font-family: $font-family-monospace;
  line-height: inherit;
  white-space: pre-wrap;
}