.wp-block-affilizz-publication {
    padding-bottom: 15px;
    border: 1px solid #c9c9cb;
	border-radius: $border_radius;
	padding: 5px;
	margin: 30px 0;
	font-family: $main_font_family;
	top: 15px;

    &.affilizz-align-left {
        .components-text-control__input {
            text-align: left;
        }
    }

    &.affilizz-align-center {
        .components-text-control__input {
            text-align: center;
        }
    }

    &.affilizz-align-right {
        .components-text-control__input {
            text-align: right;
        }
    }
}

.affilizz-loading {
    display: flex;
    align-items: center;
    justify-items: center;
    padding: 2.25rem;
    gap: 16px;
    font-family: $main_font_family;
    font-weight: $font_weight_bold;

    svg {
        height: 32px;
        width: 32px;
    }

    p {
        margin: 0 !important;
    }
}

.components-modal__frame.affilizz-modal__wrapper {
    .components-modal__content {
        &:before {
            margin-bottom: 0;
        }

        padding: 0;
        margin-top: 0;
        max-width: 600px;
    }

    .components-modal__header {
        display: none;
    }
}

.affilizz-placeholder-wrapper {
	background-color: $white_main;
    width: calc(100% + 12px);
    margin: -6px;
	padding: 24px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='2' stroke-dasharray='2%2c 2' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
    border-radius: $border_radius;;

	.affilizz-placeholder {
		box-shadow: none;
        text-align: center;
        color: #1e1e1e;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        h2 {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
            font-size: 18px;
            margin-bottom: 0;

            > svg {
                width: 32px; height: 32px;
            }
        }

        p {
            margin: 0;
            font-size: 16px;
            line-height: 22px;
        }

        button {
            margin-top: 5px;
            color: #1e1e1e;
        }

		.components-placeholder__label {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-family: $main_font_family;
			font-weight: $font_weight_bold;

			gap: 16px;

			svg {
				width: 32px;
				height: 32px;
				margin-right: 0;
			}
		}

		.components-placeholder__instructions {
			@include hint-box;
		}

		.components-button {
			width: auto !important;
			background: $green_main;
			font-size: $font_size_normal;

            &:hover {
                color: #fff !important;
            }

            &:focus {
                --wp-admin-border-width-focus: 1px;
                --wp-components-color-accent: #000;
            }
		}

		.components-placeholder__fieldset {
			display: block;
		}
	}
}