.tiles.svelte-uod8o4.svelte-uod8o4 {
    position: relative;
    max-width: 700px;
    width: 100%;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(3, 1fr)
}

.tiles.stacked.svelte-uod8o4 .tile-button.svelte-uod8o4 {
    font-size: 1.3em;
    padding-top: 1em;
    padding-bottom: 1em
}

.tile-button-label.svelte-uod8o4.svelte-uod8o4 {
    font-size: 1.4em
}

p.svelte-uod8o4.svelte-uod8o4 {
    color: var(--grey-100)
}

.tile.svelte-uod8o4>.tile-button.svelte-uod8o4 {
    color: var(--white);
    background: var(--grey-400);
    box-shadow: var(--shadow-button-sm);
    position: relative;
    display: flex;
    font-weight: 700;
    align-items: center;
    width: 100%;
    border-radius: var(--space-1);
    border: 2px solid var(--grey-300);
    box-shadow: var(--shadows-lg);
    text-align: center;
    flex-direction: column;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    transition: var(--transition-fast);
    font-size: 1em
}

@media (hover: hover) {
    .tile.svelte-uod8o4>.tile-button.svelte-uod8o4:hover:not(.disabled) {
        color: var(--white);
        background: var(--grey-300)
    }
}

.tile.svelte-uod8o4>.tile-button.svelte-uod8o4:active {
    box-shadow: none;
    color: var(--grey-200);
    background: var(--grey-700)
}

.tile.svelte-uod8o4>.tile-button.svelte-uod8o4:not(.icon-only) .svg-icon {
    transition: color var(--transition-fast);
    color: var(--white)
}

.tile.svelte-uod8o4>.tile-button.svelte-uod8o4:not(.icon-only):hover:not(.disabled):not(.active) .svg-icon {
    color: var(--white)
}

.tile.svelte-uod8o4>.tile-button[disabled].svelte-uod8o4 {
    cursor: not-allowed;
    opacity: .5
}

.tile.svelte-uod8o4>.tile-button.svelte-uod8o4:focus-visible {
    outline-color: var(--white)
}

.tile.svelte-uod8o4>.tile-button.svelte-uod8o4:active>* {
    transform: none
}

.chip-stack-wrap.svelte-uod8o4.svelte-uod8o4 {
    position: absolute;
    bottom: 5%;
    right: 5%
}