// Mixins
// ===
//
// Background Shimmer
// ---

@mixin background-shimmer() {
    overflow: hidden;
    background: $neutral-10;
    background-image: linear-gradient(to right,
        $neutral-10 0%, scale-color($neutral-15, $lightness: -5%) 50%, $neutral-10 100%);
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    animation: 1.5s linear infinite background-shimmer;
}


// Visually Hidden
// ---

@mixin visually-hidden() {
    position: absolute;

    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
}


// Wrap At Root
// ---
//
// Wraps the nested blocks in the `$selector` of your choice, and at the root
// level. Specificity of the selector can be increased by increasing the
// `$degree` to a higher number than the default `1`.

// Examples:
// ---
//
// Default:
//
// @include wrap-at-root("#app") {
//     .u-border-red { border: 1px solid red; }
// }
//
// Output: #app .u-border-red { border: 1px solid red; }
//
//
// Custom:
//
// @include wrap-at-root("#app", 3) {
//     .u-border-red { border: 1px solid red; }
// }
//
// Output: #app#app#app .u-border-red { border: 1px solid red; }


// Parameters
// ---
//
// @param $selector [String]: ID selector.
// @param $degree [Number]: Effectively the number of id-level selectors you
// need to override.

@mixin wrap-at-root($selector, $degree: 1) {
    $selector-chain: '';

    // Build an id selector by chaining the same id onto itself once more than
    // the specified degree. So if degree: 3, we get #id#id#id.

    @for $i from 1 through $degree {
        $selector-chain: $selector-chain + $selector;
    }

    @at-root #{$selector-chain} {
        @content;
    }
}