/* General elements such as buttons etc. NOT page layout*/


:root {
    --filling-btn-width: 3px;
}

[data-theme="dark"] {
    --filling-btn-width: 2px;
}

/*Button that fills on hover*/
.filling-btn {
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    color: var(--project-accent-color, var(--accent-color));
    border: var(--filling-btn-width, 2px) solid var(--project-accent-color, var(--accent-color));
    outline: 4px solid var(--background-color);
    padding: 10px 25px;
    border-radius: 20px;
    transition: color 0.1s ease-in;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.filling-btn:hover {
    color: var(--font-color-inverted, whitesmoke);
    filter: none; /*a:hover defaults to a filter*/
}

.filling-btn:before {
    content: "";
    position: absolute;
    background: var(--project-accent-color, var(--accent-color));
    border-radius: 13px;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    z-index: -1;
    transition: top 0.11s ease-in;
}

.filling-btn:hover:before {
    top: 0;
}

/*Button icon*/
.filling-btn img {
    height: 26px;
}

.filling-btn:hover img {
    filter: invert(100%);
}

/*Support btn special filling color*/
.filling-btn.support-btn:hover {
    /*Same red is used for dark and light mode*/
    border-color: #bf0202;
}

.filling-btn.support-btn:before {
    background: #bf0202;
}

.filling-btn.support-btn:hover {
    /*Color is always white as the same*/
    color: white;
}

.filling-btn.support-btn:hover img {
    filter: invert(100%);
}