@use '../../../../manga-reader-common';

// Overrides for reverse
.image-container {
    height: calc(100dvh); // override as on single, we -34px for the potential scrollbar
    
    &.reverse {
        overflow: unset;
        display: flex;
        align-content: center;
        justify-content: center;
        flex-direction: row-reverse;

        img {
            margin: unset;
        }
    }

    #image-1 {
        &.double {
            margin: 0 0 0 auto;
        }
    }

    #image-2 {
        &.double {
            margin: 0 auto 0 0;
        }
    }
}

.image-container {
    display: flex;
    align-content: center;
    justify-content: center;


    .full-height {
        margin: unset;
        object-fit: contain;
    }
}

.full-width {
    width: 100%;
    margin: 0 auto;
    vertical-align: top;
    max-width: fit-content;

    &.double {
        width: 50%;

        &.cover {
            width: 100%;
        }
    }
}

.center-double {
    display: flex;
    overflow: unset;
}

.fit-to-width-double-offset {
    max-width: 100%; // max-width fixes center alignment issue
}

.original-double-offset {
    max-width: 100%;
}

.fit-to-height-double-offset {
    height: calc(100dvh);
    object-fit: scale-down;
    top: 50%;
    left: 50%;
    max-width: 100%;
}
