:root {
	--ska-action-input-height: 40px;
	--ska-action-input-padding-x: 8px;
	--ska-action-input-padding-y: 6px;
}

body:not(#_) .ska-action-input {
	display: flex;
	flex-direction: row;
	height: var(--ska-action-input-height);

	&__wrapper {
		flex-grow: 1;
		position: relative;
		display: flex;
	}

	&__input {
		width: 100%;
		margin: 0;

		& > .components-base-control__field {
			margin: 0;
		}

		input {
			padding: var(--ska-action-input-padding-y) var(--ska-action-input-padding-x);
			height: var(--ska-action-input-height);
		}

		&--has-action input {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		&--clearable input {
			padding-right: calc(var(--ska-action-input-height) + var(--ska-action-input-padding-x));
		}

		&--actionable input {
			border-color: #f2c037;
		}

		&--required input {
			border-color: #cc1818;
		}

		&--clearable:not(.ska-action-input__input--has-action) input {
			padding-right: calc(var(--ska-action-input-height) * 2 + var(--ska-action-input-padding-x));
		}

		&--has-action + .ska-action-input__icon {
			border-left: none;
		}
	}

	&__icon.components-button {
		min-width: initial;
		position: absolute;
		right: 0;
		border-left: 1px solid rgb(117 117 117 / 10%);
		height: 100%;
		aspect-ratio: 1;

		& > svg {
			opacity: 0.5;
		}

		&[disabled] {

			& > svg {
				opacity: 0.25;
			}
		}

		&:not([disabled]) {

			&:hover, &:active, &:focus {

				& > svg {
					opacity: 1;
				}
			}
		}

		& + .ska-action-input__icon {
			margin-right: calc(var(--ska-action-input-height) + 1px);
		}
	}

	& > .components-button {
		height: 100%;

		&:not(:last-child) {
			border-radius: 0;
		}

		&:last-child {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;

			/** Shows button's left border. */
			position: relative;
		}
	}
}