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

$graphic-image-size-large: 300px;
$graphic-image-size-medium: 190px;
$graphic-image-size-small: 94px;

.graphicStyle {
    @include product-group-tile;

    &_wrapper {
        background-color: transparent;
        padding: 0;

        &--size-large {
            width: $graphic-image-size-large;
            padding-bottom: 22px;
        }
        
        &--size-medium {
            width: $graphic-image-size-medium;
            padding-bottom: 25px;
        }

        &--size-small {
            // image is small, but card is medium
            width: $graphic-image-size-medium;
            padding-bottom: 16px;
        }
    }

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

        &--size-large {
            height: $graphic-image-size-large;
            width: $graphic-image-size-large;
        }

        &--size-medium {
            height: $graphic-image-size-medium;
            width: $graphic-image-size-medium;
        }

        &--size-small {
            height: $graphic-image-size-small;
            width: $graphic-image-size-small;

            align-self: center;
        }
    }

    &_groupWrapper {
        &--padding-small {
            padding-left: 6px;
            padding-right: 6px;
        }

        &--padding-medium {
            padding-left: 10px;
            padding-right: 10px;
        }

        &--padding-large {
            padding-left: 14px;
            padding-right: 14px;
        }
    }
}
