/* ============================================================================
   06-COMPONENTS -> #MEDIA-PLACEHOLDER
   ========================================================================= */

/**
 * Provides a placeholder to indicate an image can be added.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;



/**
 * Media placeholder
 */

.media-placeholder {
    --media-placeholder-bg: var(--button-secondary-bg);
    --media-placeholder-border-color: var(--button-secondary-border-color);
    --media-placeholder-border-rounded: var(--rounded-sm);
    --media-placeholder-border-width: var(--border-width);
    --media-placeholder-padding: var(--space-4);
    --media-placeholder-hover-bg: var(--button-secondary-hover-bg);
    --media-placeholder-hover-border-color: var(--button-secondary-hover-border-color);

    @include transition(('background-color', 'border-color'));
    appearance: none;
    background-color: var(--media-placeholder-bg);
    border: var(--media-placeholder-border-width) dashed var(--media-placeholder-border-color);
    border-radius: var(--media-placeholder-border-rounded);
    cursor: pointer;
    display: inline-flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: var(--z-index-10);

    &::before {
        content: '';
        display: block;
        height: 100%;
        left: 0;
        opacity: 0;
        padding-bottom: 100%;
        top: 0;
        width: 100%;
    }

    &:hover {
        background-color: var(--media-placeholder-hover-bg);
    }
}


/**
 * Media placeholder inner
 */

.media-placeholder__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    padding: var(--media-placeholder-padding);
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}