.small-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: calc(var(--unit) * 6);
    width: 64px;
    height: 64px;
    border-radius: 50%;
	overflow: hidden;
	transition: opacity .25s var(--easier), transform .25s var(--easier);
	/* reset default <button> styling */
	padding: 0;
	background: none;
	color: var(--text-color);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent; /* no grey flash on tap in iOS Safari */
}

.small-button-container:is(.hidden) .small-button-fill {
    background-color: var(--background-color);
    opacity: 1;
}

.small-button-container:is(.hidden) .small-button-icon {
    display: none;
}

/* hover effects only on devices that can hover: a tap on iPad/iPhone would leave them stuck on */
@media (hover) {
    .small-button-container:not(.hidden):hover .small-button-fill {
        transform: scale(1.5);
        opacity: 1;
        border-radius: 120px;
        transition: transform .45s var(--easier), border-radius .45s var(--easier);
    }

    .small-button-container:hover .small-button-icon {
        color: var(--background-color);

        svg {
            stroke: var(--background-color);
        }
    }
}

.small-button-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
}

.small-button-icon {
	z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    svg {
        stroke: var(--text-color);
    }
}

.small-button-fill {
	position: absolute;
	width: 60%;
	height: 60%;
	background-color: var(--text-color);
	border-radius: 120px;
	transform: scale();
	opacity: .15;
	transition: transform .45s var(--easier), border-radius .45s var(--easier);
}