:root {
  @each $name, $size in $sizes {
    #{"--vc-size-"}#{$name}: #{$size};
  }
}

.fit {
  width: 100% !important;
  height: 100% !important;
}

.full-height {
  height: 100% !important;
}

.full-width {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.window-height {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 100vh !important;
}

.window-width {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100vw !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

@each $space, $value in $spaces {
  .vc-pa-#{$space} {
    padding: map-get($value, 'y') map-get($value, 'x');
  }

  .vc-pl-#{$space} {
    padding-left: map-get($value, 'x');
  }

  .vc-pr-#{$space} {
    padding-right: map-get($value, 'x');
  }

  .vc-pt-#{$space} {
    padding-top: map-get($value, 'y');
  }

  .vc-pb-#{$space} {
    padding-bottom: map-get($value, 'y');
  }

  .vc-px-#{$space} {
    padding-left: map-get($value, 'x');
    padding-right: map-get($value, 'x');
  }

  .vc-py-#{$space} {
    padding-top: map-get($value, 'y');
    padding-bottom: map-get($value, 'y');
  }

  .vc-ma-#{$space} {
    margin: map-get($value, 'y') map-get($value, 'x');
  }

  .vc-ml-#{$space} {
    margin-left: map-get($value, 'x');
  }

  .vc-mr-#{$space} {
    margin-right: map-get($value, 'x');
  }

  .vc-mt-#{$space} {
    margin-top: map-get($value, 'y');
  }

  .vc-mb-#{$space} {
    margin-bottom: map-get($value, 'y');
  }

  .vc-mx-#{$space} {
    margin-left: map-get($value, 'x');
    margin-right: map-get($value, 'x');
  }

  .vc-my-#{$space} {
    margin-top: map-get($value, 'y');
    margin-bottom: map-get($value, 'y');
  }
}

.vc-mt-auto,
.vc-my-auto {
  margin-top: auto;
}

.vc-ml-auto {
  margin-left: auto;
}

.vc-mb-auto,
.vc-my-auto {
  margin-bottom: auto;
}

.vc-mr-auto {
  margin-right: auto;
}

.vc-mx-auto {
  margin-left: auto;
  margin-right: auto;
}