// ----
// Gutenberg palette
// ----
$palette: (
    "dark": (
        "color": $color-dark,
        "isColorLight": false,
    ),
    "blue": (
        "color": $color-blue-600,
        "isColorLight": false,
    ),
    "grey": (
        "color": #777574,
        "isColorLight": false,
    ),
    "grey-light": (
        "color": #f4f4f4,
        "isColorLight": true,
    ),
    "light": (
        "color": $color-light,
        "isColorLight": true,
    ),
);

@use "sass:color";
@use "sass:map";

.wp-block {
    // ----
    // container
    // ----
    &-buttons {
        gap: 25px;
    }

    // ----
    // button
    // ----
    &-button {
        .wp-block-button__link {
            @extend %button-block;

            @each $name, $colors in $palette {
                &.has-#{$name}-background-color {
                    background-color: map.get($colors, color);

                    @if map.get($colors, isColorLight) == true {
                        color: $color-primary !important;
                    } @else {
                        color: $color-light !important;
                    }
                }
            }
        }
    }
}