.ddpy-buttons-container {
    --primary-color: #FFFFFF;
    --primary-background-color: #2BA9E0;
    --secondary-color: #FFFFFF;
    --secondary-background-color: #696969;
    --disabled-background-color: #888888;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

    .ddpy-buttons-container.ddpy-buttons-container-horizontal {
        flex-direction: row;
    }

    .ddpy-buttons-container > .ddpy-button {
        flex: 1;
        font-size: 1em;
        font-weight: bold;
        border: 1px solid;
        padding: 1em;
        cursor: pointer;
        text-transform: uppercase;
    }

        .ddpy-buttons-container > .ddpy-button:hover {
            opacity: 0.9;
        }

        .ddpy-buttons-container > .ddpy-button:disabled {
            cursor: not-allowed;
            background-color: var(--disabled-background-color);
            border-color: var(--disabled-background-color);
        }

        .ddpy-buttons-container > .ddpy-button.ddpy-button-rounded {
            border-radius: 2em;
        }

        .ddpy-buttons-container > .ddpy-button.ddpy-button-xs {
            font-size: 0.5em;
        }

        .ddpy-buttons-container > .ddpy-button.ddpy-button-sm {
            font-size: 0.75em;
        }

        .ddpy-buttons-container > .ddpy-button.ddpy-button-lg {
            font-size: 1.5em;
        }

        .ddpy-buttons-container > .ddpy-button.ddpy-button-xl {
            font-size: 2em;
        }

        .ddpy-buttons-container > .ddpy-button.ddpy-button-primary {
            color: var(--primary-color);
            background-color: var(--primary-background-color);
            border-color: var(--primary-background-color);
        }

        .ddpy-buttons-container > .ddpy-button.ddpy-button-secondary {
            color: var(--secondary-color);
            background-color: var(--secondary-background-color);
            border-color: var(--secondary-background-color);
        }

    .ddpy-buttons-container.ddpy-button-group {
        flex-direction: row;
        gap: unset;
    }

        .ddpy-buttons-container.ddpy-button-group > .ddpy-button {
            padding: unset;
        }

        .ddpy-buttons-container.ddpy-button-group > .ddpy-button:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .ddpy-buttons-container.ddpy-button-group > .ddpy-button:not(:first-child):not(:last-child) {
            border-radius: 0;
        }

        .ddpy-buttons-container.ddpy-button-group > .ddpy-button:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }