.button-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icon text button";
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background: var(--dark-background-color);
    color: var(--text-color);
    border: none;
    border-radius: var(--round-border-radius);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: var(--text-font-size);
    font-weight: bold;
    font-family: var(--text-font), sans-serif;
    overflow: hidden;

    .button-text {
        background: transparent;
        border: none;
        color: inherit;
        font: inherit;
        letter-spacing: -0.05em;
        width: -webkit-fill-available;
        margin: auto;
        grid-area: text;
    }
}

.button-container.centered {
    grid-template-columns: 1fr auto 1fr;
    .button-text {
        text-align: center;
    }

    .icon-container {
        justify-self: right;
    }
}

.button-container:hover { background: var(--text-color); color: var( --dark-background-color) }

.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
}

.icon-container svg {
    width: 100%;
    height: 100%;
}

.prominent-button {
    color: var(--accent-color);
    background-color: transparent;
    position: relative;
    z-index: 1;
    border-radius: var(--border-radius);
    padding: 0.25rem;
    min-height: 2rem;

    svg, p {
        mix-blend-mode: difference;
    }
}

.prominent-button.secondary { color: var(--secondary-accent); }
.prominent-button.tertiary { color: var(--tertiary-accent); }

.prominent-button:hover { background-color: transparent; color: var(--accent-color); }
.prominent-button.secondary:hover { color: var(--secondary-accent); }
.prominent-button.tertiary:hover { color: var(--tertiary-accent); }

.prominent-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 0;
    height: 100%;
    border-radius: 0;
    background-color: var(--accent-color);
    z-index: -1;
    transition: width 0.2s ease-in-out;
}

.prominent-button.secondary::after { background-color: var(--secondary-accent); }
.prominent-button.tertiary::after { background-color: var(--tertiary-accent); }

.prominent-button:hover::after {
    transition: width 0.2s ease-in-out;
    width: 100%;
}