/**
 * The following styles get applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */

.wp-block-nemtly-advanced-image {
    position: relative;
    overflow: hidden;
    /* Default to auto if not set inline */
    width: auto;
    height: auto;

    .nemtly-advanced-image-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .nemtly-image-wrapper {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        flex-grow: 1;
        width: 100%;
        height: 100%;

        img {
            display: block;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease, filter 0.5s ease;
        }
    }

    /* Object Fit */
    &.object-fit-cover .nemtly-image-wrapper img {
        object-fit: cover;
    }

    &.object-fit-contain .nemtly-image-wrapper img {
        object-fit: contain;
    }

    &.object-fit-fill .nemtly-image-wrapper img {
        object-fit: fill;
    }

    .nemtly-image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* Shapes */
    &.is-shape-rounded {
        .nemtly-image-wrapper {
            border-radius: 20px;
        }
    }

    &.is-shape-circle {
        .nemtly-image-wrapper {
            border-radius: 50%;
        }
    }

    &.is-shape-octagon {
        .nemtly-image-wrapper {
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        }
    }

    &.is-shape-rhombus {
        .nemtly-image-wrapper {
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
    }

    &.is-shape-triangle {
        .nemtly-image-wrapper {
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
    }

    /* Hover Effects */
    &.has-hover-zoom-in:hover {
        .nemtly-image-wrapper img {
            transform: scale(1.1);
        }
    }

    &.has-hover-zoom-out:hover {
        .nemtly-image-wrapper img {
            transform: scale(0.9);
        }
    }

    &.has-hover-grayscale {
        .nemtly-image-wrapper img {
            filter: grayscale(100%);
        }

        &:hover .nemtly-image-wrapper img {
            filter: grayscale(0%);
        }
    }

    &.has-hover-blur {
        .nemtly-image-wrapper img {
            filter: blur(0);
        }

        &:hover .nemtly-image-wrapper img {
            filter: blur(5px);
        }
    }

    /* Caption Styles */
    .nemtly-image-caption {
        display: block;
        margin-top: 10px;
        text-align: center;
        font-size: 0.9em;
        color: #555;
    }

    &.caption-style-overlay {
        .nemtly-image-caption {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            color: #fff;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            margin: 0;
            padding: 0 10px;
            z-index: 2;
        }
    }
}