@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;

@mixin gradient-border {
	// Sets all chilren over the gradient.
	// Don't love the wildcard implementation, should find a better one
	> * {
		position: relative;
		z-index: 2;
	}

	&::before {
		background: linear-gradient(90deg, var(--ui-accent), var(--ui-surface));
		content: '';
		position: absolute;
		inset: 1px;
		z-index: 0;
		border-radius: var(--radius-small);

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

	&::after {
		content: '';
		z-index: 0;
		position: absolute;
		inset: 2px;
		border-radius: var(--radius-small);
		background-color: var(--ui-fill);

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