.tile {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: var(--mantine-radius-md);
    border: 1px solid var(--mantine-color-default-border);
    background-color: var(--mantine-color-body);
    text-align: center;
}

.icon {
    color: var(--mantine-primary-color-filled);
    display: flex;
}

@media (hover: hover) {
    .tile:hover:not(:disabled) {
        background-color: var(--mantine-color-default-hover);
    }
}

.tile:active:not(:disabled) {
    background-color: var(--mantine-color-default-hover);
}

.tile:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
    .tile {
        transition: background-color 120ms ease-out, transform 120ms cubic-bezier(0.32, 0.72, 0, 1);
    }

    .tile:active:not(:disabled) {
        transform: scale(0.97);
    }
}