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

.share-this {
	display: flex;
	gap: var(--padding-extra-small);

	&-label {
		max-width: max-content;

		@include font.get-typography(body-bold);
	}

	&-icon {
		text-decoration: none;
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--padding-medium);
		height: var(--padding-medium);
		border-radius: var(--radius-small);
		transition: var(--transition-fast);
		color: var(--action);
		background-color: with-opacity(var(--action), 10);

		&-list {
			display: flex;
			gap: var(--padding-extra-small);
		}

		&:hover {
			cursor: pointer;
			background-color: with-opacity(var(--action-secondary), 10);
			background-color: var(--ui-fill);
			color: var(--action-tertiary);
		}
	}
}