/* Adding CSS classes should be done with consideration and rarely */
@tailwind base;
@tailwind components;
@tailwind utilities;

.extendify {
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: transparent;
    --tw-ring-color: var(--wp-admin-theme-color);
}

.extendify *,
.extendify *:after,
.extendify *:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
}
.extendify .button-focus {
    @apply focus:ring-wp focus:ring-wp-theme-500 outline-none focus:shadow-none;
}
.extendify select.button-focus,
.extendify input.button-focus {
    @apply focus:border-transparent focus:outline-none focus:shadow-none;
}

.button-extendify-main {
    @apply bg-extendify-main button-focus cursor-pointer transition duration-200 p-1.5 px-3 text-white hover:text-white no-underline hover:bg-extendify-main-dark active:bg-gray-900 active:text-white focus:text-white whitespace-nowrap;
}
#extendify-search-input:focus ~ svg,
#extendify-search-input:not(:placeholder-shown) ~ svg {
    @apply hidden;
}
#extendify-search-input::-webkit-textfield-decoration-container {
    @apply mr-3;
}

/* WP tweaks and overrides */
.extendify .components-panel__body > .components-panel__body-title {
    /* Override WP aggressive boder:none and border:0 */
    border-bottom: 1px solid #e0e0e0 !important;
    @apply bg-transparent;
}
.extendify .components-modal__header {
    @apply border-b border-gray-300;
}

/* A shim to ensure live previews w/o iframes display properly */
.block-editor-block-preview__content
    .block-editor-block-list__layout.is-root-container
    > .ext {
    @apply max-w-none;
}

/* Ensure our patterns display fullwidth on old themes + < 5.9 */
.block-editor-block-list__layout.is-root-container
    .ext.block-editor-block-list__block {
    @apply max-w-full;
}

.extendify .block-editor-block-preview__container {
    /* no important */
    @apply opacity-0;
    animation: extendifyOpacityIn 200ms cubic-bezier(0.694, 0, 0.335, 1)
        forwards 0ms;
}

/* Remove excess margin for top-level patterns on < 5.9 */
.extendify .is-root-container > [data-block],
.extendify .is-root-container > [data-align="full"],
.extendify .is-root-container > [data-align="full"] > .wp-block {
    @apply my-0 !important;
}

/* Remove excess margin for top-level patterns on 5.9+ */
.editor-styles-wrapper:not(.block-editor-writing-flow)
    > .is-root-container
    :where(.wp-block)[data-align="full"] {
    @apply my-0 !important;
}

@keyframes extendifyOpacityIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.extendify .with-light-shadow::after {
    content: "";
    @apply absolute inset-0 border-0 shadow-inner-sm;
}
.extendify .with-light-shadow:hover::after {
    @apply shadow-inner-md;
}

/* Style contentType/pageType control in sidebar */
.components-panel__body.ext-type-control .components-panel__body-toggle {
    @apply pl-0 pr-0;
}

.components-panel__body.ext-type-control .components-panel__body-title {
    @apply m-0 border-b-0 px-5;
}

.components-panel__body.ext-type-control
    .components-panel__body-title
    .components-button {
    @apply m-0 border-b-0 text-extendify-gray py-2 uppercase font-medium text-xss;
}

.components-panel__body.ext-type-control
    .components-button
    .components-panel__arrow {
    @apply right-0 text-extendify-gray;
}

.extendify .animate-pulse {
    animation: extendifyPulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes extendifyPulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}