@use "sass:math";

@import "material-design-color/material-color";
$red: $clr-red;
$body-bg: $clr-white !default;
$body-color: $clr-black !default;

$grid-gutter-width: 2rem !default;
$grid-gutter-height: 2rem !default;

$meta-overlay-bg: transparentize($clr-black, 0.2) !default;

$meta-text-wrapper-bg: $body-bg !default;
$meta-text-wrapper-color: $body-color !default;
$meta-text-wrapper-padding-width: $grid-gutter-width * 0.5 !default;
$meta-text-wrapper-padding-height: $grid-gutter-height * 0.5 !default;

$meta-nav-size: 2rem !default;
$meta-nav-arrows-size: 2.5rem !default;
$meta-nav-color: $clr-white !default;
$meta-nav-hover-color: $clr-blue-grey-50 !default;
$meta-nav-hover-bg: none !default;
$meta-nav-hover-shadow: $clr-black !default;
$meta-nav-hover-transform: scale(1.5) !default;
$meta-nav-close-hover-transform: rotate(-180deg) !default;

$meta-nav-padding: 0.25rem 0.5rem !default;

$meta-spinner-color: $clr-white !default;
$meta-spinner-weight: bold !default;
$meta-spinner-size: 2rem !default;

$meta-embed-loading-failed-color: $meta-spinner-color !default;
$meta-embed-loading-failed-size: 1.2rem !default;
$meta-embed-loading-failed-weight: $meta-spinner-weight !default;

$meta-video-width: 16 !default;
$meta-video-height: 9 !default;

// extra variables and mixings
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1390px,
    xxxl: 1590px,
) !default;
$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1330px,
    xxxl: 1560px,
) !default;

// hovers
@mixin hover-focus() {
    &:hover,
    &:focus {
        @content;
    }
}

@mixin hover-focus-active() {
    &:hover,
    &:focus,
    &:active {
        @content;
    }
}

@mixin spinner_style() {
    color: $meta-spinner-color;
    font-size: $meta-spinner-size;
    font-weight: $meta-spinner-weight;
    text-transform: uppercase;
}

// screen reader
// Only display content to screen readers
//
// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/

@mixin sr-only() {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@mixin pseudo($display: block, $pos: absolute, $content: "") {
    content: $content;
    display: $display;
    position: $pos;
}

@mixin responsive-ratio($x, $y, $pseudo: false) {
    $padding: unquote(math.div($y, $x) * 100 + "%");

    @if $pseudo {
        &:before {
            @include pseudo($pos: relative);
            padding-top: $padding;
            width: 100%;
        }
    } @else {
        padding-top: $padding;
    }
}