.c-icon-teaser-variant {
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    width: 12rem;
    height: 12rem;
    padding: 1rem;
    text-decoration: none;
    overflow: hidden;
    transition: background-color $transition-time, color $transition-time;

    @screen sm {
        padding: 2.5rem 1rem;
    }

    /* stylelint-disable */

    &[href]:hover .c-icon-teaser-variant__icon {
      transform: scale(1.1);
      transition: transform $transition-time;
    }

    &[href] {
        &:hover,
        &:focus {
            color: #fff;
            transition: transform $transition-time;

            .c-icon-teaser-variant__icon  {
                color: #fff;
            }

            @screen sm {
                .c-icon-teaser-variant__icon {
                    transform: translateY(-.25rem);
                }
            }
        }
    }
    /* stylelint-enable */
}

.c-icon-teaser-variant__content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 0;
    transition: transform $transition-time;
    height: 100%;
    gap: 1rem;
}

.c-icon-teaser-variant__icon {
    max-width: 100%;
    transition: color $transition-time;

    img {
        height: auto;
        width: auto;
        max-width: 2.5rem;
    }

    svg {
        height: auto;
        max-height: 6rem;
        width: 6rem;
        fill: white;

        @screen md {
            height: auto;
            max-height: 8rem;
            width: 8rem;
        }
    }
}

h3.c-icon-teaser-variant__headline {
    font-family: 'BaseFontFamily', sans-serif;
    font-size: 1rem;
    color: #333;
    font-weight: 600;
    line-height: 1.25;
    text-transform: initial;
    transition: color $transition-time;
    text-align: center;
}

.c-icon-teaser-variant__arrow-wrapper {
    display: flex;
    justify-content: center;
    margin-right: 0.5rem;
}

.c-icon-teaser-variant__text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;

    @screen md {
        margin-top: 1rem;
    }

    @screen sm {
        margin-top: 1rem;
    }
}

.c-icon-teaser-variant__arrow {
    font-size: 1rem;
    position: relative;
    backface-visibility: hidden;
    transition: color $transition-time;
    color: #333;
}

// Accent Color Modifiers

// Primary (Standard)
.c-icon-teaser-variant--primary {
    background-color: theme('colors.primary.500');

    &[href] {
        &:hover,
        &:focus {
            background-color: theme('colors.primary.600');
        }
    }
}

// Secondary
.c-icon-teaser-variant--secondary {
    background-color: theme('colors.secondary.500');

    &[href] {
        &:hover,
        &:focus {
            background-color: theme('colors.secondary.600');
        }
    }
}

// Accent
.c-icon-teaser-variant--accent {
    background-color: theme('colors.accent.500');

    &[href] {
        &:hover,
        &:focus {
            background-color: theme('colors.accent.600');
        }
    }
}

// CTA
.c-icon-teaser-variant--cta {
    background-color: theme('colors.cta.500');

    &[href] {
        &:hover,
        &:focus {
            background-color: theme('colors.cta.500');
        }
    }
}

// Ambient
.c-icon-teaser-variant--ambient {
    background-color: theme('colors.ambient.500');

    &[href] {
        &:hover,
        &:focus {
            background-color: theme('colors.ambient.600');
        }
    }
}
