@use "../mixins/style";
@use "../settings/defaults";
@use "sass:math";
@use "sass:string";

@each $property in gap, margin, padding {
    $prefix: string.slice($property, 1, 1);
    .#{$prefix}-0 {
        #{$property}: 0 !important;
    }
    @each $size in defaults.$SIZES {
        $size-value: var(--space-#{$size});

        .#{$prefix}-#{$size} {
            #{$property}: $size-value !important;
        }

        @if ($property != gap) {
            @each $direction in left, right, top, bottom {
                $suffix: string.slice($direction, 1, 1);

                .#{$prefix}#{$suffix}-#{$size} {
                    #{$property}-#{$direction}: $size-value !important;
                }
            }
        }

        @each $axis in x, y {
            .#{$prefix}#{$axis}-#{$size} {
                @if ($axis == x) {
                    @if ($property == gap) {
                        column-gap: $size-value !important;
                    } @else {
                        #{$property}-left: $size-value !important;
                        #{$property}-right: $size-value !important;
                    }
                } @else {
                    @if ($property == gap) {
                        row-gap: $size-value !important;
                    } @else {
                        #{$property}-top: $size-value !important;
                        #{$property}-bottom: $size-value !important;
                    }
                }
            }
        }
    }
}

.asr {
    @each $id, $aspect-ratio in defaults.$ASPECT-RATIOS {
        &-#{$id} {
            @supports (aspect-ratio: #{$aspect-ratio}) {
                aspect-ratio: $aspect-ratio !important;
            }
            @supports not (aspect-ratio: #{$aspect-ratio}) {
                position: relative !important;
                padding-top: math.div(100, $aspect-ratio) * 1% !important;

                & > * {
                    position: absolute !important;
                    inset: 0 !important;
                }
            }
        }
    }
}

.brd {
    @include style.border();

    &-none {
        border: none !important;
    }

    &-round {
        border-radius: var(--border-radius) !important;

        @each $direction in left, right, top, bottom {
            &-#{$direction} {
                @if ($direction == left or $direction == right) {
                    border-top-#{$direction}-radius: var(--border-radius) !important;
                    border-bottom-#{$direction}-radius: var(--border-radius) !important;
                } @else {
                    border-#{$direction}-left-radius: var(--border-radius) !important;
                    border-#{$direction}-right-radius: var(--border-radius) !important;
                }
            }
        }
    }

    &-square {
        border-radius: 0 !important;
    }

    @each $coordinate in left, right, top, bottom {
        &-#{$coordinate} {
            @include style.border(null, $coordinate);
        }
    }
}

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

    &-height {
        height: 100% !important;
    }

    &-width {
        width: 100% !important;
    }

    &-viewport {
        width: 100vw !important;
        height: max(100%, 100vh) !important;

        &-height {
            height: max(100%, 100vh) !important;
        }

        &-width {
            width: 100vw !important;
        }
    }
}

.obj {
    @each $fit in contain, cover, scale-down {
        @each $position in left, right, top, bottom, center {
            &-#{$fit}-#{$position} {
                object-fit: $fit !important;
                object-position: $position !important;
            }
        }
    }
}

.siz {
    @each $size in defaults.$SIZES {
        $size-value: var(--size-#{$size});

        @each $axis in x, y {
            &-#{$axis}-#{$size} {
                @if ($axis == x) {
                    width: $size-value !important;
                    max-width: 100% !important;
                } @else {
                    height: $size-value !important;
                    max-height: 100% !important;
                }
            }
        }
    }

    @each $char-count in 45, 60, 75, 90 {
        &-#{$char-count}ch {
            width: $char-count * 1ch !important;
            max-width: 100% !important;
        }
    }
}