.tb-icon-tiles {
    @apply -mx-2;
    width: 100%;
    list-style: none;
    padding: 0;
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tb-icon-tiles__item {
    width: calc(20% - #{theme('margin.4')});
    flex-shrink: 0;
    margin: 0 theme('margin.2');

    @media screen and (max-width: 1023px) {
        /*
        *  A fixed min-width makes sense here because of the
        *  horizontal scrolling.
        */
        min-width: 216px;
    }
}

.tb-icon-tiles__item-link {
    // To be replaced with design token (currently not defined)
    background-color: #f64d6e;
    padding: theme('padding.8') theme('padding.6');
    color: theme('colors.white');
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity .25s ease;

    &:hover,
    &:focus,
    &:active {
        color: theme('colors.white');
        opacity: .9;
    }
}

.tb-icon-tiles__item-label {
    font-size: theme('fontSize.base');
    font-weight: theme('fontWeight.bold');
    margin: theme('padding.4') 0 0 0;
}

.tb-icon-tiles__item-icon {
    font-size: theme('fontSize.3xl');
}
