@import '../mixins';

$corner-radius: var(--card-corner-radius, 0px);
$box-shadow: 0 2px 8px 0 var(--shadow-color);

@mixin product-group-tile {
    &_wrapper {
        background-color: var(--background-color, white);
        display: flex;
        flex-direction: column;
        border-radius: calc(#{$corner-radius} + 2px);
        cursor: pointer;
        border: 0px;

        &--shadow, &--shadow-on-hover:hover {
            box-shadow: $box-shadow;
        }

        &--border, &--border-on-hover:hover {
            outline-style: solid;
            outline-color: var(--card-border-color, white);
            outline-width: 1px;
        }

        &:focus-visible {
            outline-style: auto;
            outline-color: blueviolet;
        }
    }

    &_image {
        display: flex;
        clip-path: var(--image-mask);
        background-color: var(--image-background-color);
        border-radius: var(--image-corner-radius);
        margin-bottom: 14px;

        // imageSize
        &--image-scaleToFit {
            img {
                object-fit: contain;
            }
        }

        &--image-scaleToFill {
            img {
                object-fit: cover;
            }
        }
    }

    &_groupWrapper {
        width: 100%;
        &--padding-small {
            padding-left: 18px;
            padding-right: 18px;
        }
    }

    &_title {
        text-align: center;
        margin-bottom: 0;
        text-align: var(--text-alignment, center);

        &--group-title-large {
            @include title-3;
            color: var(--title-color);
        }

        &--group-title-medium, &--group-title-small {
            @include title-4;
            color: var(--title-color);
        }
    }

    &_description {
        @include text-5;
        color: var(--description-color);
        text-align: var(--text-alignment, center);
        word-break: break-word;
    }

    &_button {
        text-align: var(--button-alignment, center);
        padding-top: 18px; 
        word-break: break-word;
    }

    &_iconLink {
        width: 10px;
        margin-left: 5px;
    }
}
