@use "sass:map";
@use "sass:math";
@import "./../../mixins/scss/mixins";

// applies styles to only f-button element.
f-button {
	height: fit-content;
	display: inline-flex;
	flex: 0 0 auto;
	vertical-align: top;
	&[variant="block"] {
		display: flex;
		flex: 1 1 auto;
		width: 100%;
	}
	&[disabled] {
		@include disabled();
	}

	&.hasShimmer[state] {
		&::before {
			content: unset;
		}
		background: transparent !important;
	}

	&[size="x-small"] {
		--input-border-radius-round: 10px;
	}
	&[size="small"] {
		--input-border-radius-round: 14px;
	}
	&[size="medium"] {
		--input-border-radius-round: 18px;
	}
	&[size="large"] {
		--input-border-radius-round: 22px;
	}
}

f-form-group {
	&[variant="compact"][direction="horizontal"] {
		f-button {
			&[size="medium"] {
				&:first-child {
					--input-border-radius-curved: 4px 0px 0px 4px;
					--input-border-radius-round: 18px 0px 0px 18px;
				}
				&:last-child {
					--input-border-radius-curved: 0px 4px 4px 0px;
					--input-border-radius-round: 0px 18px 18px 0px;
				}
				&:not(:first-child):not(:last-child) {
					--input-border-radius-curved: 0px 0px 0px 0px;
					--input-border-radius-round: 0px 0px 0px 0px;
				}
			}
			&[size="small"] {
				&:first-child {
					--input-border-radius-curved: 4px 0px 0px 4px;
					--input-border-radius-round: 14px 0px 0px 14px;
				}
				&:last-child {
					--input-border-radius-curved: 0px 4px 4px 0px;
					--input-border-radius-round: 0px 14px 14px 0px;
				}
				&:not(:first-child):not(:last-child) {
					--input-border-radius-curved: 0px 0px 0px 0px;
					--input-border-radius-round: 0px 0px 0px 0px;
				}
			}
		}
	}
}