/**
 * Editor Styles
 */

.generateblocks-plugin-templates-modal {
    &.generateblocks-plugin-templates-modal-loading {
        .generateblocks-control-tabs {
            pointer-events: none;
            opacity: .3;
        }

        .generateblocks-plugin-templates-modal-loading-spinner {
            .components-spinner {
                margin: 0;
            }
        }
    }

    .generateblocks-plugin-templates-categories-row {
		margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .generateblocks-plugin-templates-categories-select {
        max-width: 170px;
        margin-bottom: 10px;
    }

    .generateblocks-plugin-templates-count {
        max-width: 170px;
        margin-bottom: 20px;
        opacity: .7;
	}
}

.generateblocks-plugin-templates-spinner .components-spinner {
    float: none;
    margin-left: 0;
}

.generateblocks-plugin-templates-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
	margin-top: -15px;
	margin-left: -15px;

    > .generateblocks-plugin-templates-list-item {
        flex: 0 0 33.333%;
         width: 33.333%;
        padding-top: 15px;
		padding-left: 15px;

        @media screen and (max-width: 840px) {
            flex: 0 0 50%;
            width: 50%;
        }

        @media screen and (max-width: 450px) {
            flex: 0 0 100%;
            width: 100%;
        }

        > button {
            display: block;
            width: 100%;
            cursor: pointer;
            padding: 10px;
            text-align: center;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 0 0 2px #fff;
            transition: .2s border-color, .2s box-shadow;

            &:hover,
            &:focus,
            &:active {
                box-shadow: 0 0 0 2px #216eb7;
            }

			&[disabled] {
				cursor: not-allowed;
			}

            .generateblocks-plugin-templates-list-item-image {
                position: relative;
                display: block;

                img {
                    display: block;
                    width: 100%;
                    height: auto;
                    border-top-left-radius: 4px;
                    border-top-right-radius: 4px;
                }

                .generateblocks-plugin-templates-list-item-image-sizer {
                    width: 100%;

                    + .lazyload-wrapper img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                    }
                }
            }
        }

        .generateblocks-plugin-templates-list-item-title {
            padding: 5px;
            font-size: 10px;
            font-weight: 600;
        }
    }
}

.generateblocks-plugin-templates-list-item-no-thumb .generateblocks-plugin-templates-list-item-title {
    border-top: 0 !important;
}

.generateblocks-component-modal .components-modal__header {
    margin-bottom: 0;
}

.generateblocks-component-modal-tab-panel {
	.components-tab-panel__tab-content {
		min-height: 300px;
	}
}

.generateblocks-plugin-templates-modal {
    min-width: 600px;
    width: 60%;
}

.gblocks-template-requires-version {
	font-size: 11px;
	color: #000;
	margin-left: 0;
	margin-right: 0;
}
