.product-slideshow-component {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    overflow: hidden;
    padding: 16px;
    gap: 16px;
    border-radius: 8px;
}

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

.product-slideshow-component-controls > .product-slideshow-component-primary-products-control {
    display: none;
}

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

.product-slideshow-component-products-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 300px;
    transition-property: transform;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
    padding-left: 16px;
    padding-right: 16px;
}

.product-slideshow-component-product {
    width: 300px;
    object-fit: contain;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
}

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

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

.product-slideshow-component-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /*
        Height has to be the same as .product-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;
}

.product-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);
}

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