@import 'croppie/croppie.css';

.aw-cropper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    &__croppie {
        position: relative;
    }

    &__rotate {
        position: absolute;
        right: 1rem;
        top: 1rem;
        z-index: 2;
        opacity: 1;
        color: var(--c-surface);
        fill: var(--c-surface);
        padding: 0;
        min-height: 0;
    }

    &__buttons {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        flex-direction: column-reverse;

        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--c-mono-800);
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .croppie-container {
        visibility: hidden;

        .cr-viewport,
        .cr-resizer {
            border: none;
        }

        .cr-slider-wrap {
            width: 100%;
            background: var(--c-on-surface);
            border: 1px solid var(--c-mono-200);
            border-radius: 0.625rem;
            display: flex;
            padding: 0.75rem 1.5rem;
            position: absolute;
            bottom: 1rem;
            margin: 0;
            z-index: 2;
            width: calc(100% - 3rem);
            left: 1.5rem;

            input[type="range"] {
                -webkit-appearance: none;
                width: 100%;
                background: transparent;
                padding: 0;
            }

            input[type="range"]::-webkit-slider-runnable-track {
                height: 0.25rem;
                background: var(--c-surface);
            }
            input[type="range"]::-moz-range-track {
                height: 0.25rem;
                background: var(--c-surface);
            }
            input[type="range"]::-ms-track {
                height: 0.25rem;
                background: var(--c-surface);
            }

            /* Повзунок (кружечок) */
            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                height: 1rem;
                width: 1rem;
                border-radius: 50%;
                background: var(--c-surface);
            }
            input[type="range"]::-moz-range-thumb {
                height: 1rem;
                width: 1rem;
                border-radius: 50%;
                background: var(--c-surface);
            }
            input[type="range"]::-ms-thumb {
                height: 1rem;
                width: 1rem;
                border-radius: 50%;
                background: var(--c-surface);
            }
        }

        .cr-boundary {
            height: 28.5rem;
            border-radius: 0.9375rem;
            background: #000;
        }

        .cr-vp-square {
            border-radius: 0.9375rem;
        }

        .cr-viewport {
            max-width: var(--max-width-viewport);
            max-height: var(--max-height-viewport);
            width: 100% !important;
            height: auto !important;

            aspect-ratio: 1/1;
        }
    }

    &.is-ready {
        .croppie-container {
            visibility: visible;
        }
    }
}

@media (min-width: 692px) {
    .aw-cropper {
        &__buttons {
             flex-direction: row;
             margin-left: -2rem;
             margin-right: -2rem;
             padding-right: 2rem;
             padding-left: 2rem;
         }
    }
}