.image-slideshow-component {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    overflow: hidden;
    padding: 16px;
    gap: 16px;
    border: var(--border-outline);
    border-radius: 8px;
    box-shadow: var(--shadow-small), var(--shadow-inset-light-background);
}

.image-slideshow-component-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.image-slideshow-component-controls > .image-slideshow-component-primary-images-control {
    display: none;
}

.image-slideshow-component-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-slideshow-component-images-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 32px;
    width: 300px;
    transition-property: transform;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
}

.image-slideshow-component-image {
    max-width: 300px;
    max-height: 450px;
    object-fit: contain;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    filter: var(--shadow-drop);
}

.image-slideshow-component-image.alternate {
    display: none;
}

.image-slideshow-component-left-control {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.image-slideshow-component-right-control {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.image-slideshow-component-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /*
        Height has to be the same as .image-slideshow-component-pagination-item.active to prevent footer height resizing effect.
        Otherwise elements are "jumping" up and down when resizing animation is applied.
    */
    height: 16px;
}

.image-slideshow-component-pagination-item {
    width: 12px;
    height: 12px;
    background-color: var(--color-light-background);
    border-radius: 100%;
    box-shadow: var(--shadow-small);
    transition-property: width, height, background-color, box-shadow;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
}

.image-slideshow-component-pagination-item.active {
    width: 16px;
    height: 16px;
    background-color: var(--color-highlight);
    border-radius: 100%;
    box-shadow: var(--shadow-highlight);
}

@media (min-width: 710px) {
    .image-slideshow-component-image {
        max-width: 450px;
        max-height: 600px;
    }

    .image-slideshow-component-images-container {
        width: 450px;
    }
}