:root {
    --button-background-default: var(--white);
    --button-background-invert: var(--black);
    --button-text-default: var(--black);
    --button-text-invert: var(--white);

    --button-background-primary: var(--blue);
    --button-background-secondary: var(--grey-40);
    --button-background-tertiary: var(--grey-20);
    --button-background-like: var(--white);
    --button-background-liked: var(--red);
    --button-background-pinned: var(--green);
}

/* Buttons */
/* All Buttons should be replace with these over time hopefully */

button.bttn,
a.bttn {
    position: relative;
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    font-size: 14px;
    padding: 12px 18px;
    border-radius: 32px;
    cursor: pointer;
    transition: box-shadow .2s ease 0s;
}

button.bttn:hover,
a.bttn:hover {

}

button.bttn--disabled,
a.bttn--disabled {
    opacity: 0.8;
    pointer-events: none;
}

/* Blue Button */
button.bttn.bttn--primary,
a.bttn--primary,
button.pst-header__bttn.bttn--primary,
a.pst-header__bttn.bttn--primary,
button.pst-mobile-header__bttn.bttn--primary,
a.pst-mobile-header__bttn.bttn--primary {
    background-color: var(--button-background-primary)!important;
    color: var(--button-text-invert)!important;
    &:hover {
        box-shadow: inset 0 0 0 128px rgba(0,0,0,.1);
    }
}

/* White Button */
button.bttn.bttn--secondary,
a.bttn--secondary,
button.pst-header__bttn.bttn--secondary,
a.pst-header__bttn.bttn--secondary,
button.pst-mobile-header__bttn.bttn--secondary,
a.pst-mobile-header__bttn.bttn--secondary {
    background-color: #040507;
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.2)!important;
    color: var(--button-text-invert);
    &:hover {
        box-shadow: inset 0 0 0 128px rgba(255,255,255,.1);
    }
}

/* Black Button */
button.bttn.bttn--tertiary,
a.bttn--tertiary {
    background-color: #141517;
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.2)!important;
    color: var(--button-text-invert);
    &:hover {
        box-shadow: inset 0 0 0 128px rgba(255,255,255,.1);
    }
}

/* White Button */
button.bttn.bttn--white,
a.bttn--white {
    background-color: var(--button-background-default);
    color: var(--button-text-default);
    &:hover {
        box-shadow: inset 0 0 0 128px rgba(0,0,0,.1);
    }
}

/* Red Button */
button.bttn.bttn--danger,
a.bttn--danger {
    background-color: #e04545;
    color: var(--button-text-invert);
    &:hover {
        box-shadow: inset 0 0 0 128px rgba(0,0,0,.1);
    }
}

button.bttn.bttn--transparent,
a.bttn--transparent {
    background-color: transparent;
    color: var(--button-text-invert);
}

button.bttn.bttn--love,
a.bttn--love {
    background-color: var(--button-background-default);
    color: var(--button-text-default);
}

button.bttn.bttn--love.loved,
a.bttn--love.loved {
    background-color: var(--button-background-liked);
    color: var(--button-text-invert);
}

button.bttn.toggled,
a.bttn.toggled {
    background-color: var(--button-background-primary);
    color: var(--button-text-invert);
}

button.bttn:not(.bttn--mini) svg,
a.bttn:not(.bttn--mini) svg {
    margin-right: 4px;
}

button.bttn.bttn--centred,
a.bttn.bttn--centred {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Small Buttons */

button.bttn.bttn--small,
a.bttn.bttn--small {
    font-size: 12px;
    padding: 6px 12px;
    margin: 2px 0;
}

/* Mini buttons */

button.bttn.bttn--mini,
a.bttn.bttn--mini {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 32px;
}

@media (max-width: 480px) {
    button.bttn.bttn--mini,
    a.bttn.bttn--mini {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

button.bttn.bttn--mini svg,
a.bttn.bttn--mini svg,
button.bttn.bttn--mini i,
a.bttn.bttn--mini i {
    margin-right: 0;
}

.pst-follow-button--small .pst-follow-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Like button confetti */

button.bttn.bttn--love i,
a.bttn--love i {
    position: absolute;
    opacity: 0;
    width: 3px;
    height: 3px;
    top: 60%;
    left: 50%;
}

/* Poster editor buttons */

.bttn--pin.active {
    background-color: var(--button-background-pinned);
    color: var(--button-text-invert);
}

.bttn--hide.active {
    background-color: var(--button-background-primary);
    color: var(--button-text-invert);
}

.bttn--edit:hover {
    background-color: var(--button-background-primary);
    color: var(--button-text-invert);
}

.bttn--delete:hover {
    background-color: var(--button-background-liked);
    color: var(--button-text-invert);
}

/* Mobile */
@media (max-width: 480px) { 
    button.bttn,
    a.bttn {
        font-size: 12.5px;
        padding: 10px 14px;
    }
}

/* Author Recommendation List */

.pst-author-recommendations__list {
    & a.bttn {
        padding: 0;
        font-size: 13px;
    }

    & a.bttn.bttn--primary {
        background-color: transparent!important;
    }
}