@import '../mixins/button';
@import '../mixins/elevation';

.fab {
	@include button;
	@include contained;
	@include elevation(6);

	--offset: 0rem;
	--radius: 50rem; // todo : set this in a way that makes sense

	width: 5.6rem;
	height: 5.6rem;

	&.mini {
		width: 4rem;
		height: 4rem;
	}

	&.extended {
		--padding: 2rem;

		width: auto;
		height: 4.8rem;

		.icon,
		svg {
			&:nth-child(1) {
				margin: 0 1.2rem 0 -0.8rem;
			}

			&:nth-child(-1) {
				margin: 0 -0.8rem 0 1.2rem;
			}
		}
	}

	&:active {
		@include elevation(12);
	}

	&:global(.dense),
	:global(.dense) & {
		--offset: 0.8rem;
		--icon-size: 1.8rem;
	}
}