/* These unique classes are globally reusable rounded buttons. */
.bw-btn,
.wr-btn,
.ob-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 20px;
    gap: 5px;

    border-radius: 20px;
    font-weight: 500;
    white-space: nowrap;
    transition: .2s !important;

    svg {
        height: 26px;
        transition: .2s;
    }
}

/* WHITE RED BUTTONS - used for high priority actions */
.wr-btn,
.wr-btn.active:hover {
    font-size: 14px;
    background-color: white;
    color: black !important;
    border-color: black !important;

    svg {
        fill: var(--clr-accent);
    }
}

.wr-btn:hover,
.wr-btn.active {
    background-color: var(--clr-accent);
    color: white !important;
    border-color: var(--clr-accent) !important;

    svg {
        fill: white !important;
    }
}

.wr-btn.active.border-1:hover svg {
    fill: var(--clr-accent) !important;
}

.buttons .wr-btn svg,
.buttons .wr-btn.active:hover svg,
.container_header .wr-btn svg,
.container_header .wr-btn.active:hover svg {
    fill: black !important;
}

.buttons .wr-btn:hover svg,
.buttons .wr-btn.active svg,
.container_header .wr-btn:hover svg,
.container_header .wr-btn.active svg {
    fill: white !important;
}

/* BLACK WHITE BUTTONS - used for low priority actions */
.bw-btn,
.bw-btn.active:hover {
    background-color: white;
    color: black !important;
    border: 1px solid black;
}

.bw-btn:hover svg,
.bw-btn.active svg {
    fill: white;
}

.bw-btn:hover,
.bw-btn.active {
    background-color: black;
    color: white !important;
}

.bw-btn svg,
.bw-btn.active:hover svg {
    fill: black;
}

/* RED BLACK BUTTONS - uppercase, more padding, normally red - black on hover */
.rb-btn {
    height: unset !important;
    padding: 10px 30px !important;

    color: white;
    background-color: var(--clr-accent) !important;

    font-size: 14px;
    font-weight: 900 !important;
    font-family: sans-serif;
    text-transform: uppercase;
    border-radius: 20px !important;
    border: none;
}

.rb-btn:hover {
    background-color: black !important;
}

/* CIRCULAR BUTTONS - small, icon only, circular buttons that don't take up much space  */
.circle_btns {
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--gap-small);
    margin-left: var(--gap-small);
}

.circle_btn {
    border-radius: 50%;
    width: min-content;
    height: min-content;
    padding: 0;
    border: 0;
}

.circle_btns svg {
    width: 40px !important;
    aspect-ratio: 1;
    fill: black;
    transition: .2s;
}

.circle_btns .circle_btn:hover svg {
    fill: var(--clr-accent);
}

.circle_btn.share_btn {
    padding: 0;
    border: none;
}

.circle_btn.share_btn:hover {
    background-color: var(--clr-grey);
}

.search_icon {
    width: 25px;
    stroke-width: .7;
    fill: var(--clr-accent);
}

.search_icon:hover {
    stroke: var(--clr-accent);
    cursor: pointer;
}