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

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

@use "../head_layout" as *;

@use "../soul_type" as *;

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

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

@mixin hero--size($size) {
    @if $size == small {
        .hero-body {
            padding: $hero-body-padding-small;
        }
    } @else if $size == medium {
        @include tablet {
            .hero-body {
                padding: $hero-body-padding-medium;
            }
        }
    } @else if $size == large {
        @include tablet {
            .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;
    }
    @include mobile {
        display: none;
    }
}

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

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

    @include mobile {
        .button {
            display: flex;
            &:not(:last-child) {
                margin-bottom: q(12);
            }
        }
    }

    @include tablet {
        display: flex;
        justify-content: center;
        .button:not(:last-child) {
            margin-right: q(24);
        }
    }
}

// @import "../utilities/mixins"

// $hero-body-padding: 3rem q(24) !default
// $hero-body-padding-tablet: 3rem 3rem !default
// $hero-body-padding-small: q(24) !default
// $hero-body-padding-medium: 9rem 4.5rem !default
// $hero-body-padding-large: 18rem q(72) !default

// $hero-colors: $colors !default

// Main container
// .hero
//   align-items: stretch
//   display: flex
//   flex-direction: column
//   justify-content: space-between
//   .navbar
//     background: none
//   .tabs
//     ul
//       border-bottom: none
//   // Colors
//   @each $name, $pair in $hero-colors
//     $color: nth($pair, 1)
//     $color-invert: nth($pair, 2)
//     &.is-#{$name}
//       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: bulmaRgba($color-invert, 0.9)
//         a:not(.button),
//         strong
//           color: $color-invert
//       .navbar-menu
//         +touch
//           background-color: $color
//       .navbar-item,
//       .navbar-link
//         color: bulmaRgba($color-invert, 0.7)
//       a.navbar-item,
//       .navbar-link
//         &:hover,
//         &.is-active
//           background-color: bulmaDarken($color, 5%)
//           color: $color-invert
//       .tabs
//         a
//           color: $color-invert
//           opacity: 0.9
//           &:hover
//             opacity: 1
//         li
//           &.is-active a
//             color: $color !important
//             opacity: 1
//         &.is-boxed,
//         &.is-toggle
//           a
//             color: $color-invert
//             &:hover
//               background-color: bulmaRgba($scheme-invert, 0.1)
//           li.is-active a
//             &,
//             &:hover
//               background-color: $color-invert
//               border-color: $color-invert
//               color: $color
//       // Modifiers
//       @if type-of($color) == "color"
//         &.is-bold
//           $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
//           $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
//           background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
//           +mobile
//             .navbar-menu
//               background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
//   // Sizes
//   &.is-small
//     .hero-body
//       padding: $hero-body-padding-small
//   &.is-medium
//     +tablet
//       .hero-body
//         padding: $hero-body-padding-medium
//   &.is-large
//     +tablet
//       .hero-body
//         padding: $hero-body-padding-large
//   &.is-halfheight,
//   &.is-fullheight,
//   &.is-fullheight-with-navbar
//     .hero-body
//       align-items: center
//       display: flex
//       & > .container
//         flex-grow: 1
//         flex-shrink: 1
//   &.is-halfheight
//     min-height: 50vh
//   &.is-fullheight
//     min-height: 100vh

// Components

// .hero-video
//   @extend %overlay
//   overflow: hidden
//   video
//     left: 50%
//     min-height: 100%
//     min-width: 100%
//     position: absolute
//     top: 50%
//     transform: translate3d(-50%, -50%, 0)
//   // Modifiers
//   &.is-transparent
//     opacity: 0.3
//   // Responsiveness
//   +mobile
//     display: none

// .hero-buttons
//   margin-top: q(24)
//   // Responsiveness
//   +mobile
//     .button
//       display: flex
//       &:not(:last-child)
//         margin-bottom: q(12)
//   +tablet
//     display: flex
//     justify-content: center
//     .button:not(:last-child)
//       +ltr-property("margin", q(24))

// Containers

// .hero-head,
// .hero-foot
//   flex-grow: 0
//   flex-shrink: 0

// .hero-body
//   flex-grow: 1
//   flex-shrink: 0
//   padding: $hero-body-padding
//   +tablet
//     padding: $hero-body-padding-tablet