@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

$search-border-radius: 4px;

.search-themes-card {
	background: var(--color-surface);

	.search {
		border: 1px solid var(--color-neutral-10);
		border-radius: $search-border-radius;
		box-sizing: border-box;
		flex: 0 1 auto;
		height: 56px;
		margin: 0;
		position: relative;

		&.is-open {
			&.has-focus,
			&.has-focus:hover {
				border-color: var(--color-neutral-20);
				box-shadow: none;
			}

			.search__input,
			.search__icon-navigation,
			.search-themes-card__icon {
				border-radius: $search-border-radius;
			}
		}

		.search__open-icon {
			transform: rotate(-90deg) scale(1.058);

			path {
				fill: var(--color-neutral-30);
			}
		}
	}

	.search-themes-card__icon {
		align-items: center;
		background: var(--color-surface);
		display: flex;
		justify-content: center;
		height: 100%;
		padding: 0 8px;
		width: 24px;

		.accessible-focus &:focus {
			outline: dotted 1px var(--color-primary);
		}

		.search-themes-card__icon-close {
			cursor: pointer;
			transform: scale(0.614);
		}
	}
}
