////
/// @group utils.layout
////

@use 'math.scss' as *;
@use 'units.scss' as units;

/// Convenience mixin to inherit the border-radius of a parent based on child position (first child
/// inherits top left/right radius, last child inherits bottom left/right radius)
///
/// @example
///     @include first-last-radius()

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

// internal helper for abs, fixed, rel

@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;
    }
}

/// @example
///     @include rel($t: null, $r: null, $b: null, $l: null) // =>
///     position: relative;
///     top: 0;
///     right: 0;
///     bottom: 0;
///     left: 0;

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

/// @example
///     @include abs($t: null, $r: null, $b: null, $l: null) // =>
///     position: absolute;
///     top: 0;
///     right: 0;
///     bottom: 0;
///     left: 0;

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

/// @example
///     @include fixed($t: null, $r: null, $b: null, $l: null) // =>
///     position: fixed;
///     top: 0;
///     right: 0;
///     bottom: 0;
///     left: 0;

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

/// @example
///     @include left-top($l: 0, $t: 0) // =>
///     position: absolute;
///     left: 0;
///     top: 0;

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

/// @example
///     @include right-top($r: 0, $t: 0) // =>
///     position: absolute;
///     right: 0;
///     top: 0;

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

/// @example
///     @include left-bottom($l: 0, $b: 0) // =>
///         position: absolute;
///         left: 0;
///         bottom: 0;

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

/// @example
///     @include right-bottom($r: 0, $b: 0) // =>
///         position: absolute;
///         left: 0;
///         bottom: 0;

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

/// @example
///     @include abs-fill() // =>
///     position: absolute;
///     top: 0;
///     left: 0;
///     width: 100%;
///     height: 100%;

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

/// Center the item using a mix of positioning and a transform
/// @example
///     @include center($left: 50%, $top: 50%, $position: absolute)
///     position: absolute;
///     left: 50%;
///     top: 50%;
///     transform: translate(-50%, -50%);

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

/// Center the item horizontally using a mix of positioning and a transform
/// @example
///     @include center-x($left: 50%, $position: absolute) // =>
///     position: absolute;
///     left: 50%;
///     transform: translateX(-50%);

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

/// Center the item vertically using a mix of positioning and a transform
/// @example
///     include center-y($top: 50%, $position: absolute) // =>
///     position: absolute;
///     top: 50%;
///     transform: translateY(-50%);

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

/// Adds before and after pseudo elements to a flex container to allow centering content to
/// non-perfect values for more natural looking centered layouts
///
/// @example
///     @include flex-pseudo-center(33%);

@mixin flex-pseudo-center($center: 40%) {
    &::before {
        content: '';
        display: block;
        flex: divide($center, 100%);
    }
    &::after {
        content: '';
        display: block;
        flex: divide(100% - $center, 100%);
    }
}