/* Base button */
.grt_btn {
    background: none;
    border: 2px solid;
    padding: 1em 2em;
    margin: 0.5em;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    color: var(--grt-color);
    transition: all 0.25s ease;
}

.grt_btn.is-hover {
    border-color: var(--grt-hover);
    color: #fff;
}

/* Effects */
.grt_btn_fill.is-hover {
    box-shadow: inset 0 0 0 2em var(--grt-hover);
}

.grt_btn_pulse.is-hover {
    animation: grt_pulse 1s;
}

@keyframes grt_pulse {
    0% {
        box-shadow: 0 0 0 0 var(--grt-hover);
    }
}

.grt_btn_close.is-hover {
    box-shadow:
        inset -3.5em 0 0 0 var(--grt-hover),
        inset 3.5em 0 0 0 var(--grt-hover);
}

.grt_btn_raise.is-hover {
    transform: translateY(-0.25em);
    box-shadow: 0 0.5em 0.5em -0.4em var(--grt-hover);
}

.grt_btn_up.is-hover {
    box-shadow: inset 0 -3.25em 0 0 var(--grt-hover);
}

.grt_btn_slide.is-hover {
    box-shadow: inset 6.5em 0 0 0 var(--grt-hover);
}

.grt_btn_offset {
    box-shadow:
        0.3em 0.3em 0 0 var(--grt-color),
        inset 0.3em 0.3em 0 0 var(--grt-color);
}

.grt_btn_offset.is-hover {
    box-shadow:
        0 0 0 0 var(--grt-hover),
        inset 6em 3.5em 0 0 var(--grt-hover);
}

/* Colors */
.grt_btn_fill {
    --grt-color: #a972cb;
    --grt-hover: #c77dff;
}

.grt_btn_pulse {
    --grt-color: #ef6eae;
    --grt-hover: #ff85c1;
}

.grt_btn_close {
    --grt-color: #ff7f82;
    --grt-hover: #ff9aa2;
}

.grt_btn_raise {
    --grt-color: #ffa260;
    --grt-hover: #ffb703;
}

.grt_btn_up {
    --grt-color: #e4cb58;
    --grt-hover: #f1d96b;
}

.grt_btn_slide {
    --grt-color: #8fc866;
    --grt-hover: #a7e07e;
}

.grt_btn_offset {
    --grt-color: #19bc8b;
    --grt-hover: #3ddc97;
}