@use "sass:meta";

// Name:            Overlay
// Description:     Component to create content areas overlaying an image
//
// Component:       `uk-overlay`
//
// Adopted:         `uk-overlay-icon`
//
// Modifier:        `uk-overlay-default`
//                  `uk-overlay-primary`
//
// ========================================================================


// Variables
// ========================================================================





/* ========================================================================
   Component: Overlay
 ========================================================================== */

.uk-overlay {
    padding: $overlay-padding-vertical $overlay-padding-horizontal;
    @if(meta.mixin-exists(hook-overlay)) {@include hook-overlay();}
}

/*
 * Remove margin from the last-child
 */

.uk-overlay > :last-child { margin-bottom: 0; }


/* Icon
 ========================================================================== */

.uk-overlay-icon {
    @if(meta.mixin-exists(hook-overlay-icon)) {@include hook-overlay-icon();}
}


/* Style modifiers
 ========================================================================== */

/*
 * Default
 */

.uk-overlay-default {
    --uk-inverse: #{$overlay-default-color-mode};
    background: $overlay-default-background;
    @if(meta.mixin-exists(hook-overlay-default)) {@include hook-overlay-default();}
}

// Color Mode
@if ( $overlay-default-color-mode == light ) { .uk-overlay-default { @extend .uk-light !optional;} }
@if ( $overlay-default-color-mode == dark ) { .uk-overlay-default { @extend .uk-dark !optional;} }

/*
 * Primary
 */

.uk-overlay-primary {
    --uk-inverse: #{$overlay-primary-color-mode};
    background: $overlay-primary-background;
    @if(meta.mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();}
}

// Color Mode
@if ( $overlay-primary-color-mode == light ) { .uk-overlay-primary { @extend .uk-light !optional;} }
@if ( $overlay-primary-color-mode == dark ) { .uk-overlay-primary { @extend .uk-dark !optional;} }


// Hooks
// ========================================================================

@if(meta.mixin-exists(hook-overlay-misc)) {@include hook-overlay-misc();}

// @mixin hook-overlay(){}
// @mixin hook-overlay-icon(){}
// @mixin hook-overlay-default(){}
// @mixin hook-overlay-primary(){}
// @mixin hook-overlay-misc(){}