Colors

/* Background */

@mixin make-backgrounds($colors) {
  @each $name, $color in $colors {
    .-bg-#{$name} {
      @include background-variant($color, true);
    }
  }
}

body,
.-bg-white {
  --btn-background-arrow: #{$secondary};
  --btn-foreground-arrow: #{$black};
  --btn-arrow-color: #{$white};
  --btn-arrow-text-color: #{$white};
}

[class*='-bg-']:not(.-bg-white) {
  --btn-background-arrow: #{$white};
  --btn-foreground-arrow: #{$black};
  --btn-arrow-color: #{$secondary};
  --btn-arrow-text-color: #{$black};
}

.-bg-secondary,
.-bg-gray-darker,
.-bg-primary {
  --list-hook-color: #{$white};
}

[class*='-bg-']:not(.-bg-secondary):not(.-bg-gray-darker):not(.-bg-primary) {
  --list-hook-color: #{$secondary};
}

body,
[class*='-bg-']:not(.-bg-primary):not(.-bg-secondary):not(.-bg-black):not(.-bg-gray):not(.-bg-gray-darker):not(.-bg-gray-dark) {
  --line-separator-color: #{$gray-dark};
}

.-bg-primary,
.-bg-secondary,
.-bg-black,
.-bg-gray,
.-bg-gray-darker,
.-bg-gray-dark {
  --line-separator-color: #{$white};
}

@include make-backgrounds($colors);
@include make-backgrounds($theme-colors);

.-bgimg {
  display: flex;
  flex-direction: column;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  &.-parallax {
    background-attachment: fixed;
  }

  .container-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    > * {
      width: 100%;
    }
  }
}

.-bgvideo {
  position: relative;
  overflow: hidden;

  .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
  }

  &.-drop-content {
    @include breakpoint(pre-medium down) {
      .background-video {
        position: initial;
        transform: none;
      }

      .container-wrapper {
        /* stylelint-disable declaration-no-important */
        min-height: auto !important;
      }
    }
  }
}