@layer util {
    .button20 {
        font-size: 16px;
        font-weight: 500;
        display: flex;
    }

    .button20__button {
        background-color: var(--button-background-color, var(--accent-color));
        border: 2px solid var(--button-border-color, var(--accent-color));
        border-radius: var(--button-border-radius);
        color: var(--button-text-color, var(--text-color-accent));
        padding: 0.3em 2.9em;
        text-align: center;
        font-size: inherit;
        font-weight: inherit;
        margin: 2px;
    }

    .button20__button:hover,
    a.button20__button:hover {
        background-color: var(--button-background-color-hover, var(--accent-color));
        border-color: var(--button-border-color-hover, var(--accent-color));
        box-shadow: 0 0 0 1px var(--button-border-color-hover, var(--accent-color));
        color: var(--button-text-color-hover, var(--text-color-accent));
    }

    .button20__button:active,
    a.button20__button:active {
        background-color: var(--button-background-color-active);
        border-color: var(--button-border-color-active);
        box-shadow: 0 0 0 1px var(--button-border-color-active);
        color: var(--button-text-color-active);
    }

    .button20--medium {
        font-size: 18px;
        font-weight: 600;

    }

    .button20--large {
        font-size: 20px;
        font-weight: 700;
        width: 100%;
    }

    .button20--large .button20__button {
        flex: 1;
    }

    .button20--medium .button20__button,
    .button20--large .button20__button {
        padding-bottom: 0.6em;
        padding-top: 0.6em;
        cursor: pointer;
    }

    .button20--center {
        justify-content: center;
    }

    .button20--right {
        justify-content: flex-end;
    }

    .button20--event-button {
        margin-top: 1rem;
    }
}