.elevating-button
{
    --e-border-color: var(--ncs-primary);
    --e-shadow-color: var(--e-border-color);
    --e-active-shadow-size: 0.5rem;
    --e-border-size: 2px;
    --e-bg-color: white;
    --e-text-color: var(--text);
    --e-active-bg-color: var(--e-bg-color);
    --e-active-text-color: var(--e-text-color);
    --e-active-border-color: var(--e-border-color);
    --e-border-radius: 4000px;
    --e-padding: 1rem;
    --e-gap: 1rem;
    --e-transition-duration: 0.2s;
    --translation: translate(-4px, -4px);

    background-color: var(--e-shadow-color);
    height: fit-content;
    border-radius: var(--e-border-radius);
    cursor: pointer;
    color: var(--e-text-color);
}

.elevating-button__content
{
    background-color: var(--e-bg-color);
    border: var(--e-border-size) solid var(--e-border-color);
    transition: all var(--e-transition-duration) ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-padding);
    border-radius: inherit;
    gap: var(--e-gap);
    user-select: none;
    box-shadow: 0px 0px 0px 0px var(--e-shadow-color);
}

.elevating-button:hover:not(.active.no-active-hover)
{
    color: var(--e-active-text-color);

    .elevating-button__content
    {
        background-color: var(--e-active-bg-color);
        border-color: var(--e-active-border-color);
        transform: var(--translation);
        box-shadow: 0px 0px 0px 0px transparent;
    }
}

.elevating-button.active
{
    cursor: default;

    .elevating-button__content
    {
        transform: none;
        box-shadow: 0px 0px 0px var(--e-active-shadow-size) var(--e-shadow-color);
    }
}

/* Don't show hover effect on touch devices */
@media (hover: none) {
    .elevating-button:hover:not(.active.no-active-hover)
    {
        color: unset;

        .elevating-button__content
        {
            background-color: var(--e-bg-color);
            border-color: var(--e-border-color);
            transform: none;
            box-shadow: 0px 0px 0px 0px var(--e-shadow-color);
        }
    }
}