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

/**
 * 
 */


//
// SCSS imports
//

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



/**
 * Media item
 */

.media-item {
    --media-item-bg: var(--bg-tertiary);
    --media-item-border-color: var(--form-input-border-color);
    --media-item-border-radius: var(--form-input-border-radius);
    --media-item-border-width: var(--form-input-border-width);
    --media-item-action-size: var(--space-5);

    background-color: var(--media-item-bg);
    border: var(--media-item-border-width) solid var(--media-item-border-color);
    border-radius: var(--media-item-border-radius);
    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%;
    }

    &:first-of-type {
        [data-action=move-media-backwards] {
            display: none;
        }
    }
    
    &:nth-last-of-type(2) {
        [data-action=move-media-forwards] {
            display: none;
        }
    }
}


/**
 * Media item inner
 */

.media-item__inner {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    padding: var(--space-2);
    position: absolute;
    top: 0;
    width: 100%;
}


/**
 * Media item overlay
 */

.media-item__overlay {
    @include transition(('opacity'));
    align-items: center;
    bottom: 0;
    display: inline-flex;
    gap: var(--space-2);
    justify-content: center;
    opacity: 0;
    padding: var(--space-3);
    position: absolute;
    right: 0;
    z-index: var(--z-index-20);
}


/**
 * Media item preview
 */

.media-item__preview {
    display: block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
}




/* MODIFIERS
   ========================================================================= */

/**
 * Overlay
 */

.media-item[data-overlay=true] {
    cursor: pointer;

    &::after {
        @include transition(('opacity'));
        background-color: var(--bg-overlay);
        bottom: 0;
        content: '';
        display: block;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
    }

    &:hover {
        &::after {
            opacity: 1;
        }

        & > .media-item__overlay {
            opacity: 1;
        }
    }
}