@use '../../../base/mixins/breakpoints' as break;

.embed-widget {
	:first-child {
		z-index: 2;
	}

	&::before {
		background: linear-gradient(90deg, var(--action), var(--action-secondary));
		content: '';
		position: absolute;
		inset: -3px;

		// matches the utility classes from the next app, which should be moved into BUI
		margin: 0 var(--padding-huge);
		z-index: 0;
		border-radius: var(--radius-large);

		@include break.max-mobile {
			margin: 0;
		}
	}

	&::after {
		content: '';
		z-index: 0;
		position: absolute;
		inset: 0;

		// matches the utility classes from the next app, which should be moved into BUI
		margin: 0 var(--padding-huge);
		background-color: var(--neutral-1);
		border-radius: var(--radius-large);

		@include break.max-mobile {
			margin: 0;
		}
	}
}