@import '../../../../assets/scss/abstracts/variables';
@import '../../../../assets/scss/abstracts/mixins';

.rdg-blocks .rdg-buttons {
    width: 100%;

    .buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;

        a {
            padding: .8rem 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-white);
            border-radius: .4rem;
            min-width: 10rem;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s border-color ease-in-out, .2s opacity ease-in-out, .2s box-shadow ease-in-out;

            i {
                font-size: 1.2rem;
                padding-left: .5rem;
            }
            
            &.link-success {
                background-color: var(--color-success);
                border-top: 3px solid var(--color-success-light);
            }

            &.link-warning {
                background-color: var(--color-warning);
                border-top: 3px solid var(--color-warning-light);
            }

            &.link-danger {
                background-color: var(--color-danger);
                border-top: 3px solid var(--color-danger-light);
            }

            &.link-default {
                color: var(--color-primary);
                background-color: var(--color-gray);
                border: 2px solid var(--color-primary);
            }
        }
    }
}

.acf-block-preview {
    .rdg-buttons {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;

        .buttons {
            a {
                text-decoration: none;
            }
        }
    }
}
