@import 'scss/styles.scss';

$zoom-scale: 1.2;
$hover-brightness: 1.08;
$transition: 0.3s ease;

.zoomable-state {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition:
        transform $transition,
        filter $transition;
    will-change: transform, filter;
    cursor: pointer;

    path {
        transition: fill $transition;
    }
}

.zoomable-state.__hover,
.zoomable-state:hover {
    transform: scale($zoom-scale);
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}