////
/// @group utils.layout
/// @todo Needs documentation
////

@use 'sass:math';
@use 'units.scss' as units;

/// Creates css to force an element to maintain a particular aspect (based on width) using the
/// padding bottom trick. Note: padding bottom is calculated relative to the parent width, so it's
/// common to use this on a pseudo element and set the width on the element itself. Check out
/// aspect-before / aspect-after.
///
/// @param {string or number} $aspect A number (like 1.333) or string (like '16:9') that represents the aspect
/// ratio
///
/// @param {string} $display [block] The value of the display property to be set on the element
///
/// @example @include aspect('16:9') // produces the correct css for an aspect ratio of 16:9
///
/// @example @include aspect(divide(4,3))  // produces the correct css for an aspect ratio of 4:3

@mixin aspect($aspect, $display: block) {
    $aspect: units.aspect-to-number($aspect);
    display: $display;
    width: 100%;
    padding-bottom: 100% * math.div(1, $aspect);
}

@mixin aspect-before($aspect, $display: block) {
    &:before {
        content: '';
        @include aspect($aspect, $display);
    }
}

@mixin aspect-after($aspect, $display: block) {
    &:after {
        content: '';
        @include aspect($aspect, $display);
    }
}

// inherit the border radius of a parent for the first and last items

@mixin first-last-radius {
    border-radius: 0;
    &:first-child {
        border-radius: inherit;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    &:last-child {
        border-radius: inherit;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    &:first-child:last-child {
        border-radius: inherit;
    }
}

@mixin pos($pos: null, $t: null, $r: null, $b: null, $l: null) {
    position: $pos;

    // no offsets
    @if ($t == null and $r == null and $b == null and $l == null) {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    // one offset
    @else if ($t != null and $r == null and $b == null and $l == null) {
        top: $t;
        right: $t;
        bottom: $t;
        left: $t;
    }

    // two offsets
    @else if ($t != null and $r != null and $b == null and $l == null) {
        top: $t;
        right: $r;
        bottom: $t;
        left: $r;
    }

    // other
    @else {
        top: $t;
        right: $r;
        bottom: $b;
        left: $l;
    }
}

@mixin rel($t: null, $r: null, $b: null, $l: null) {
    @include pos(relative, $t, $r, $b, $l);
}

@mixin abs($t: null, $r: null, $b: null, $l: null) {
    @include pos(absolute, $t, $r, $b, $l);
}

@mixin fixed($t: null, $r: null, $b: null, $l: null) {
    @include pos(fixed, $t, $r, $b, $l);
}

@mixin left-top($l: 0, $t: 0) {
    position: absolute;
    left: $l;
    top: $t;
}

@mixin right-top($r: 0, $t: 0) {
    position: absolute;
    right: $r;
    top: $t;
}

@mixin left-bottom($l: 0, $b: 0) {
    position: absolute;
    left: $l;
    bottom: $t;
}

@mixin right-bottom($r: 0, $b: 0) {
    position: absolute;
    right: $l;
    bottom: $t;
}

@mixin abs-fill() {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@mixin center($left: 50%, $top: 50%, $position: absolute) {
    position: $position;
    left: $left;
    top: $top;
    transform: translate(-$left, -$top);
}

@mixin center-x($left: 50%, $position: absolute) {
    position: $position;
    left: $left;
    transform: translateX(-$left);
}

@mixin center-y($top: 50%, $position: absolute) {
    position: $position;
    top: $top;
    transform: translateY(-$top);
}