@import "@Themes/constants.scss";

.root {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	gap: var(--spacing-3, 24px);

	width: fit-content;
	padding: var(--spacing-2, 16px) var(--Radius-2xl, 32px) var(--spacing-2, 16px) var(--spacing-xl, 32px);

	clip-path: inset(0 round var(--Radius-md, 8px));

	&::before {
		content: "";
		position: absolute;
		left: -15px;
		top: -15px;
		right: -15px;
		bottom: -15px;
		border: 16px dashed var(--dropdown-input-border-hovered);
		border-radius: calc(2 * var(--Radius-md, 8px));
		box-sizing: border-box;
		z-index: -1;
	}

	&.filled {
		&::before {
			border-color: var(--dropdown-input-border-expanded);
		}
	}

	&:hover {
		&::before {
			border-color: var(--dropdown-input-border-expanded);
		}
		background: var(--primary-weak-higlight, #e5eefa);
	}

	.content {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-4, 32px);

		.browse-document-container {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-sm, 8px);

			.browse-document {
				display: flex;
				gap: var(--spacing-sm, 8px);

				&.desktop {
					@media screen and (max-width: $screen-s) {
						display: none;
					}
				}

				&.mobile {
					display: none;
					@media screen and (max-width: $screen-s) {
						display: flex;
					}
				}
			}
		}
	}

	.documents {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm, 8px);
	}

	svg {
		min-width: var(--spacing-3, 24px);
		min-height: var(--spacing-3, 24px);
		width: var(--spacing-3, 24px);
		height: var(--spacing-3, 24px);
		stroke: var(--color-primary-500);
	}
}