/* RIPPLE BUTTON */
.button {
    position: relative;
    display: flex;
    overflow: hidden;
    color: var(--btn-fg);
    background-color: var(--btn-bg);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
    border: none;
    padding-block: 6px;
    padding-inline: 10px;
    cursor: pointer;
    outline: none;
    gap: 5px;
    flex-shrink: 0;
    flex-grow: 0;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    box-sizing: border-box;
    transition: 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}
.button:hover { background-color: var(--btn-bg-hov); }
.button span.ripple {
    position: absolute;
    border-radius: 50%;
    background: #ffffff99;
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
    z-index: 1;
}
.button.normal:hover {
    color: var(--btn-fg-nov);
    box-shadow: 0px 0px 22px var(--accent);
}
@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* INPUT */
.input {
    padding: 6px;
    padding-inline: 8px;
    border-radius: 7px;
    outline: 0;
    color: var(--fg);
    background-color: var(--bg);
    border: 1px solid var(--border);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
    transition: 0.3s ease-in-out;
    box-sizing: border-box;
}
.input:focus {
    border: 1px solid var(--btn-bg);
    box-shadow: 0px 0px 16px -10px var(--btn-bg);
}

/* LINK */
.link {
    color: var(--accent);
    font-weight: bold;
    font-style: italic;
    text-decoration: none;
    text-shadow: none;
}
.link:hover {
    color: var(--accent);
    text-decoration: underline;
}