// Background (BG)
// Luxize components for styling background
//

// stylelint-disable declaration-no-important
// stylelint-disable selector-no-qualifying-type

.bg {
  --#{$prefix}bg-opacity: 1;

  z-index: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: $transition-base;

  &[data-parallax-bg] {
    background-attachment: fixed;
    background-position: 50% 50%;
  }

  &.position-absolute {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  &.position-relative {
    width: 100%;
    height: 100%;
  }

  img {
    width: 100%;
    height: auto;
  }
  // .bg-img {
  //   height: 100%;
  //   object-fit: cover;
  // }

  &.vw-100 {
    right: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    margin-right: -50vw !important;
    margin-left: -50vw !important;
  }

  .overlay {
    transition: $transition-base;
  }
}

a.bg {
  &:hover .overlay {
    --bs-bg-opacity: 0;
  }
}

.bg-pos-cb {
  background-position: center bottom;
}
.bg-pos-tc {
  background-position: top center;
}

// .bg-img {
//   position: relative;
//   overflow: hidden;
//   .img {
//     visibility: hidden;
//   }
// }
// .img-placeholder {
//   background-repeat: no-repeat;
//   background-position: center center;
//   background-size: cover;
//   .zoom-bg-img .bg-img & {
//     transition: all .5s;
//   }
//   .zoom-bg-img:hover .bg-img & {
//     transform: scale(1.2);
//   }
//   .invisible + & {
//     position: absolute;
//     top: 0;
//     right: 0;
//     bottom: 0;
//     left: 0;
//     display: block;
//   }
//   .bg-img-size-contain & {
//     background-size: contain;
//   }
// }
.ratio4-3 {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: calc(100% * 3 / 4);
  background-size: cover;
}