@tailwind utilities;
.wm-json-media-dropzone.wm-dropzone{
        @apply border-primary-600 text-primary-600 dark:border-primary-600 dark:text-primary-600;
}
.wm-btn{
      @apply transition text-gray-800/40 hover:text-gray-800 p-1 rounded-full border border-gray-800/40 hover:border-gray-800 dark:text-gray-300/40 dark:hover:text-gray-300   dark:rounded-full dark:border dark:border-gray-300/40 dark:hover:border-gray-300;
  }
.gallery-file-upload-wrapper {

    --gallery-file-green: #2a2929,
    linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(1, 123, 230, 0.8), rgba(0, 0, 255, 0) 70.71%);;
    --gallery-file-radiux-lg: 1.5rem;
    --gallery-file-radiux-sm: 0.5rem;
    --gallery-file-snap-x: proximity;
    --gallery-file-btn-delete-color: #ff1a1a;
    --gallery-file-btn-edit-color: #7ceb54;
    --wm-progress : 0;

    display: flex;
    gap: 1rem;
    margin-block-end: 1rem;
    scroll-snap-type: x var(--gallery-file-snap-x);
    overflow: hidden;
    transition: all 0.2s ease-in-out;



    .image-file {
        scroll-snap-align: center;
        background: var(--gallery-file-green);
        width: 300px;
        height: 200px;
        position: relative;
        border-radius: var(--gallery-file-radiux-lg);
        overflow: hidden;
        display: flex;
        flex-shrink: 0;
        align-items: stretch;
        font-size: 11px;
        box-sizing: border-box;
        outline: 1px solid rgba(190, 189, 189, 0.46);
        outline-offset: -1px;

        .gallery-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding-inline: 1.3rem;
            padding-block-start: 0.55rem;
            padding-block-end: 2rem;
            display: flex;
            flex-direction: column;
            gap: .2rem;
            color: white;
            background-image: linear-gradient(rgba(40, 40, 40, 0.78) 45%, rgba(26, 26, 26, 0));
            transition: all 0.5s ease-in-out;
            pointer-events: none;
            z-index: 1;
        }

        .webplusm-finish-uploading {
            background: linear-gradient(rgba(12, 141, 5, 0.88) 45%, rgba(12, 29, 12, 0));
        }

        .webplusm-error-uploading {
            background: linear-gradient(rgba(155, 4, 44, 0.9) 45%, rgba(12, 29, 12, 0));
        }

        .file-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            border-radius: 2rem;
            background: orange;
            width: var(--wm-progress);
        }

        .gallery-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            flex-shrink: 0;
            flex-direction: row;
            align-items: stretch;
            place-content: space-between;
            color: white;
            pointer-events: none;

            .gallery-icon {
                width: fit-content;
                background-color: rgba(26, 26, 26, 0.72);
                transition: all 0.2s ease-in-out;
                padding-inline: 0.53rem;
                z-index: 1;

                &.reorder {
                    border-top-right-radius: var(--gallery-file-radiux-lg);
                    padding-inline: 1.3rem;
                    padding-block: 0.35rem;
                    cursor: grab;

                    &.grab-cursor {
                        cursor: grab;
                    }

                    &.grabbing-cursor {
                        cursor: grabbing;
                    }
                }

                &.edit {

                    border-radius: var(--gallery-file-radiux-lg);
                    /* border-top-right-radius: var(--gallery-file-radiux-lg);*/
                    padding-block: 0.53rem;
                    margin-block-end: 0.2rem;
                    --gallery-file-btn-edit-color: rgba(85, 206, 42, 1);
                    color: var(--gallery-file-btn-edit-color);

                    &:hover {
                        --gallery-file-btn-edit-color: #55ce2a;
                    }

                    &:active {
                        --gallery-file-btn-edit-color: #34a40a;
                    }
                }

                &.delete {
                    border-radius: var(--gallery-file-radiux-lg);
                    padding-block: 0.53rem;
                    margin-block-end: 0.2rem;
                    color: var(--gallery-file-btn-delete-color);
                    --gallery-file-btn-delete-color: rgba(249, 56, 76, 0.62);

                    &:hover {
                        --gallery-file-btn-delete-color: #f9384c;
                    }

                    &:active {
                        --gallery-file-btn-delete-color: #e3031b;
                    }
                }
            }
        }

        &:hover .gallery-icon {
            background-color: rgba(26, 26, 26, 0.89);

            &.delete {
                --gallery-file-btn-delete-color: rgb(249, 56, 76);
            }

            &.edit {
                --gallery-file-btn-edit-color: #7ceb54;
            }
        }
    }
}