@import '../../../../styles/mixins';
@import '../../../../styles/shared/product-groups-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-image-size-large-mobile: 121px;

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

.horizontalStyle {
    @include product-group-tile;

    &_wrapper {
        flex-direction: row;
        text-decoration: none;
        overflow: hidden;

        padding: 0;
        width: var(--tile-width);
    }

    &_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;
        }

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

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

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

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

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

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

        &--mobile-size-large { 
            padding: 14px 16px;
        }
    }

    &_title {
        &--mobile-size-large { 
            line-height: 1;
        }
    }

    &_button {
        &--mobile-size-large { 
            padding-top: 15px;
        }
    }
}
