@import '../../../../styles/mixins';
@import '../../../../styles/shared/product-group-tiles.scss';

$horizontal-style-size-large: 630px;
$horizontal-style-image-size-large: 192px;

$horizontal-style-size-medium: 410px;
$horizontal-style-image-size-medium: 110px;

$horizontal-style-size-small: 300px;
$horizontal-style-image-size-small: 82px;

.horizontalStyle {
    @include product-group-tile;

    &_wrapper {
        flex-direction: row;

        overflow: hidden;

        padding: 0;

        &--size-large {
            width: $horizontal-style-size-large;
            height: $horizontal-style-image-size-large;
        }
        
        &--size-medium {
            width: $horizontal-style-size-medium;
            height: $horizontal-style-image-size-medium;
        }

        &--size-small {
            width: $horizontal-style-size-small;
            height: $horizontal-style-image-size-small;
        }
    }

    &_image {
        height: 100%;
        margin-bottom: 0;

        img {
            border-radius: var(--image-corner-radius);
        }

        &--size-large {
            flex-basis: $horizontal-style-image-size-large;
            height: $horizontal-style-image-size-large;
        }

        &--size-medium {
            flex-basis: $horizontal-style-image-size-medium;
            height: $horizontal-style-image-size-medium;
        }

        &--size-small {
            flex-basis: $horizontal-style-image-size-small;
            height: $horizontal-style-image-size-small;

            align-self: center;
        }
    }

    &_groupWrapper {
        // take whatever's left after image
        flex: 1;

        &--padding-small {
            padding: 12px 16px;
        }

        &--padding-medium {
            padding: 14px 16px;
        }

        &--padding-large {
            padding: 20px 28px;
        }
    }
}
