// ============================================================================
// Components | Hero
// ============================================================================

@use "sass:map";
@use "sass:color";
@use "../../../variables" as *;
@use "../../../dev" as *;

@use "../../head_layout" as *;

@use "../../soul_type" as *;

$hero-breakpoint-mobile-max: q(768) !default;
$hero-breakpoint-tablet-min: q(769) !default;
$hero-body-padding-small: q(24) q(16) !default;
$hero-body-padding-medium: q(64) q(32) !default;
$hero-body-padding-large: q(128) q(48) !default;

// ============================================================================
// Mixins | Hero Component
// ============================================================================

// -----------------------------------------------------------------------------
// Hero Size Mixins
// -----------------------------------------------------------------------------

@mixin hero--size($size) {
    @if $size == small {
        .hero-body {
            padding: $hero-body-padding-small;
        }
    } @else if $size == medium {
        @media (min-width: $hero-breakpoint-tablet-min) {
            .hero-body {
                padding: $hero-body-padding-medium;
            }
        }
    } @else if $size == large {
        @media (min-width: $hero-breakpoint-tablet-min) {
            .hero-body {
                padding: $hero-body-padding-large;
            }
        }
    }
}

// -----------------------------------------------------------------------------
// Hero Height Variants
// -----------------------------------------------------------------------------

@mixin hero--height($variant) {
    @if $variant == halfheight {
        min-height: 50vh;
    } @else if $variant == fullheight {
        min-height: 100vh;
    }
    .hero-body {
        display: flex;
        align-items: center;
        > .container {
            flex-grow: 1;
            flex-shrink: 1;
        }
    }
}

// -----------------------------------------------------------------------------
// Hero Colors (Dynamic)
// -----------------------------------------------------------------------------

@mixin hero--color($name, $pair) {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    background-color: $color;
    color: $color-invert;

    a:not(.button):not(.dropdown-item):not(.tag):not(
            .pagination-link.is-current
        ),
    strong {
        color: inherit;
    }
    .title {
        color: $color-invert;
    }
    .subtitle {
        color: rgba($color-invert, 0.9);
        a:not(.button),
        strong {
            color: $color-invert;
        }
    }
    .navbar-item,
    .navbar-link {
        color: rgba($color-invert, 0.7);
        &:hover,
        &.is-active {
            background-color: darken($color, 5%);
            color: $color-invert;
        }
    }
    .tabs a {
        color: $color-invert;
        opacity: 0.9;
        &:hover {
            opacity: 1;
        }
    }
    .tabs li.is-active a {
        color: $color !important;
        opacity: 1;
    }
    .tabs.is-boxed a,
    .tabs.is-toggle a {
        color: $color-invert;
        &:hover {
            background-color: rgba($color-invert, 0.1);
        }
    }
    .tabs li.is-active a {
        background-color: $color-invert;
        border-color: $color-invert;
        color: $color;
    }
}

// -----------------------------------------------------------------------------
// Hero Video Modifier
// -----------------------------------------------------------------------------

@mixin hero--video($transparent: false) {
    position: absolute;
    overflow: hidden;
    video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        transform: translate3d(-50%, -50%, 0);
    }
    @if $transparent {
        opacity: 0.3;
    }
    @media (max-width: $hero-breakpoint-mobile-max) {
        display: none;
    }
}

// -----------------------------------------------------------------------------
// Hero Buttons Block
// -----------------------------------------------------------------------------

@mixin hero--buttons {
    margin-top: q(24);

    @media (max-width: $hero-breakpoint-mobile-max) {
        .button {
            display: flex;
            &:not(:last-child) {
                margin-bottom: q(12);
            }
        }
    }

    @media (min-width: $hero-breakpoint-tablet-min) {
        display: flex;
        justify-content: center;
        .button:not(:last-child) {
            margin-right: q(24);
        }
    }
}

// -----------------------------------------------------------------------------
// Hero Image Mixin
// -----------------------------------------------------------------------------

/// Hero image with darkened background overlay
/// @param {String} $image-url - URL of the background image
/// @param {Number} $height - Height of the hero image (default: 50%)
@mixin hero-image($image-url: "https://picsum.photos/200/300", $height: 50%) {
    /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url($image-url);

    /* Set a specific height */
    height: $height;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

// -----------------------------------------------------------------------------
// Hero Text Mixin
// -----------------------------------------------------------------------------

/// Hero text centered in the middle of the hero section
@mixin hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}