@use '../../../base/functions' as *;
@use '../../../base/mixins/typography' as font;

// Not importing the other share this component because they are so different
.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-style: solid;
		border-width: 1px;
		border-radius: var(--radius-small);
		transition: var(--transition-fast);
		padding: var(--padding-extra-small);
		color: var(--neutral-5);
		border-color: with-opacity(var(--neutral-5), 10);

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

		&:hover {
			cursor: pointer;
			background-color: var(--ui-fill);
			color: var(--action-secondary);
		}
	}
}