@import "../../common";

.gblocks-component-url-input {
    width: 100%;
    margin-top: 10px;
    font-family: $default-font;
    font-size: $default-font-size;
    line-height: $default-line-height;
    background: #fff;
    border: 1px solid #e2e4e7;
	color: #000;

    .gblocks-component-url-input-flex {
        display: flex;
        align-items: center;

        .editor-url-input {
            width: auto;

            input[type="text"] {
                width: 100%;
            }
        }

        .editor-url-input input[type="text"]::placeholder {
            color: #222;
        }

        > .dashicon {
            width: 20px;
            color: #222;
        }

		.components-base-control__field {
			margin-bottom: 0;
		}
    }

    .gblocks-component-url-input-more-options {
        padding: 10px;
        border-top: 1px solid #e2e4e7;

		.components-base-control {
			margin-bottom: 5px;
		}

        .components-base-control .components-base-control__field {
            margin-bottom: 0;
        }

		.components-base-control:last-child {
    		margin-bottom: 0;
		}
    }
}

.gblocks-component-url-input-float {
    $blocks-button__link-input-width: 260px;

    position: absolute;
    min-width: $blocks-button__link-input-width;
    max-width: $blocks-button__link-input-width;
    box-shadow: 0 3px 30px rgba(25, 30, 35, .1);
    z-index: 150;

    // arrow.
    &::after,
    &::before {
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 20px;
        width: 0;
        height: 0;
        pointer-events: none;
        border: solid transparent;
    }
    &::after {
        border: 5px solid rgba(255, 255, 255, 0);
        border-bottom-color: #fff;
    }
    &::before {
        margin-left: -1px;
        border: 6px solid rgba(226, 228, 231, 0);
        border-bottom-color: #e2e4e7;
    }

    .editor-url-input__suggestions {
        max-width: $blocks-button__link-input-width - $icon-button-size - $icon-button-size;
    }
}

.block-editor-block-list__block .gblocks-component-url-input-flex input[type="text"] {
    max-width: 100%;
    width: 100%;
}