@use "../../mixins/breakpoint" as *;

//
// Floated images
//

$_alignments: (left, right);

$img-float-margin-side: $grid-gutter-width !default;
$img-float-margin-bottom: 1em !default;

%img-float {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: $img-float-margin-bottom;
    padding: 0;
}

.img-left,
.img-right,
.img-center {
    @extend %img-float;
}

@each $breakpoint in $breakpoints {
    @each $alignment in $_alignments {
        .img-#{$breakpoint}-#{$alignment} {
            @extend %img-float;
        }
    }
}

.img-left {
    float: left !important;
    margin-left: 0;
    margin-right: $img-float-margin-side;
}

.img-right {
    float: right !important;
    margin-left: $img-float-margin-side;
    margin-right: 0;
}

@each $breakpoint in $breakpoints {
    @include breakpoint($breakpoint) {
        .img-#{$breakpoint}-left {
            float: left !important;
            margin-left: 0;
            margin-right: $img-float-margin-side;
        }

        .img-#{$breakpoint}-right {
            float: right !important;
            margin-left: $img-float-margin-side;
            margin-right: 0;
        }

        .img-#{$breakpoint}-left,
        .img-#{$breakpoint}-right {
            + {
                h1, .h1,
                h2, .h2,
                h3, .h3,
                h4, .h4,
                h5, .h5,
                h6, .h6,
                p {
                    margin-top: 0;
                }
            }
        }
    }
}

.img-clear {
    float: none !important;
}