@use "../../../dev" as *;
@use "../../../variables" as *;
// @use "../../../mixins" as *;
// @use "../soul_type" as *;

// ============================================================================
// Media | Image
// ============================================================================

///
/// Resets border styling on images to remove borders when inside an `<a>`
/// element.
///
img {
    // Reset
    // Remove border when inside `a` element in IE 8/9/10
    border-style: none;
    // max-width: 100%;
    // height: auto;
}

///
/// Mixin for styling images to cover their container.
///
/// The image is positioned absolutely, taking up the full width and height
/// of its container. The background is centered and covers the entire
/// container.
///
@mixin image--cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    //     width: 100%;
    // height: 100%;
    // object-fit: cover;
    // object-position: center;
    // display: block;
    // position: relative !important;
    // overflow: hidden !important;
    // background-position: center !important;
}

///
/// Mixin for creating a parallax effect on images.
///
/// The image is positioned relative with a fixed background attachment,
/// creating a parallax scrolling effect.
///
@mixin image--parallax {
    position: relative !important;
    background-size: cover !important;
    overflow: hidden;
    background-attachment: fixed !important;
    transition-duration: 0s;
    -moz-transition-duration: 0s;
    -webkit-transition-duration: 0s;
    -o-transition-duration: 0s;
}

///
/// Mixin for fixing the background of an image in place.
///
/// The image background is fixed, centered, and does not repeat. This is
/// useful for creating non-scrolling backgrounds.
///
@mixin image_fix--background {
    background-attachment: fixed !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover !important;
    overflow: hidden;
    position: relative;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
}

// .background-size-inherit {background-size: inherit}
// .background-attachment-inherit {background-attachment: inherit}
// .background-position-left {background-position: left center;}
// .background-position-left-bottom {background-position: left bottom;}
// .background-position-right {background-position: right center;}
// .background-position-top {background-position: center top !important;}
// .up-down-ani {display:table; position: relative; -webkit-animation-name: up-down-animation; -webkit-animation-duration:.7s; -webkit-animation-timing-function: linear; -webkit-animation-delay:.7s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: up-down-animation; -moz-animation-duration:.7s; -moz-animation-timing-function: linear; -moz-animation-delay:.7s; -moz-animation-iteration-count: infinite; -ms-animation-name: up-down-animation; -ms-animation-duration:.7s; -ms-animation-timing-function: linear; -ms-animation-delay:.7s; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; -o-animation-direction: alternate; -o-animation-name: up-down-animation; -o-animation-duration:.7s; -o-animation-timing-function: linear; -o-animation-delay:.7s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; animation-direction: alternate; animation-name: up-down-animation; animation-duration:.7s; animation-timing-function: linear; animation-delay:.7s; animation-iteration-count: infinite; animation-direction: alternate; margin:0 auto;}
// .background-position-x-50 {background-position-x: 50% !important;}

//   @mixin image_wide {
//     position:           relative; //??
//     padding-bottom:     56.25%;
//     top:                0px;
//     left:               0px;
//     height:             0;
//     overflow:   hidden;
//   }

//   // Responsive images (ensure images don't scale beyond their parents)
// //
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
// .img-fluid {
//   @include img-fluid();
// }

// Image thumbnails
// .img-thumbnail {
//   padding: $thumbnail-padding;
//   background-color: $thumbnail-bg;
//   border: $thumbnail-border-width solid $thumbnail-border-color;
//   @include border-radius($thumbnail-border-radius);
//   @include box-shadow($thumbnail-box-shadow);

//   // Keep them at most 100% wide
//   @include img-fluid();
// }

// @import "../utilities/mixins"

// $dimensions: 16 24 32 48 64 96 128 !default

// .image
//   display: block
//   position: relative
//   img
//     display: block
//     height: auto
//     width: 100%
//     &.is-rounded
//       border-radius: $radius-rounded
//   &.is-fullwidth
//     width: 100%
//   // Ratio
//   &.is-square,
//   &.is-1by1,
//   &.is-5by4,
//   &.is-4by3,
//   &.is-3by2,
//   &.is-5by3,
//   &.is-16by9,
//   &.is-2by1,
//   &.is-3by1,
//   &.is-4by5,
//   &.is-3by4,
//   &.is-2by3,
//   &.is-3by5,
//   &.is-9by16,
//   &.is-1by2,
//   &.is-1by3
//     img,
//     .has-ratio
//       @extend %overlay
//       height: 100%
//       width: 100%
//   &.is-square,
//   &.is-1by1
//     padding-top: 100%
//   &.is-5by4
//     padding-top: 80%
//   &.is-4by3
//     padding-top: 75%
//   &.is-3by2
//     padding-top: 66.6666%
//   &.is-5by3
//     padding-top: 60%
//   &.is-16by9
//     padding-top: 56.25%
//   &.is-2by1
//     padding-top: 50%
//   &.is-3by1
//     padding-top: 33.3333%
//   &.is-4by5
//     padding-top: 125%
//   &.is-3by4
//     padding-top: 133.3333%
//   &.is-2by3
//     padding-top: 150%
//   &.is-3by5
//     padding-top: 166.6666%
//   &.is-9by16
//     padding-top: 177.7777%
//   &.is-1by2
//     padding-top: 200%
//   &.is-1by3
//     padding-top: 300%
//   // Sizes
//   @each $dimension in $dimensions
//     &.is-#{$dimension}x#{$dimension}
//       height: $dimension * q(1)
//       width: $dimension * q(1)

// .overlay {
//     position: relative;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     right: 0;
//     height: 100%;
//     width: 100%;
//     opacity: 0;
//     transition: 0.5s ease;
// }

// .wallpaper {
//     position: fixed;
//     right: 0;
//     bottom: 0;
//     min-width: 100%;
//     min-height: 100%;
// }

@mixin vignette {
    box-shadow: 0 0 q(200) rgba(0, 0, 0, 0.9) inset;
}