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

/**
$states map created to hold values of different states
**/
$states: (
	"primary": (
		"background": var(--color-primary-default),
		"hover": var(--color-primary-default-hover),
		"loading": var(--color-primary-surface)
	),
	"neutral": (
		"background": var(--color-neutral-secondary),
		"hover": var(--color-neutral-default-hover),
		"loading": var(--color-surface-tertiary)
	),
	"success": (
		"background": var(--color-success-default),
		"hover": var(--color-success-default-hover),
		"loading": var(--color-success-surface)
	),
	"warning": (
		"background": var(--color-warning-default),
		"hover": var(--color-warning-default-hover),
		"loading": var(--color-warning-surface)
	),
	"danger": (
		"background": var(--color-danger-default),
		"hover": var(--color-danger-default-hover),
		"loading": var(--color-danger-surface)
	),
	"inherit": (
		"background": var(--color-inherit-button),
		"hover": var(--color-inherit-button-hover),
		"loading": var(--color-inherit-button-loader)
	)
);

// $sizes will all values related to different sizes
$sizes: (
	"x-small": (
		"height": 20px,
		"padding": 0px 8px,
		"fontSize": 10px,
		"gap": 4px,
		"loaderSize": 12px
	),
	"small": (
		"height": 28px,
		"padding": 0px 12px,
		"fontSize": 12px,
		"gap": 8px,
		"loaderSize": 16px
	),
	"medium": (
		"height": 36px,
		"padding": 0px 16px,
		"fontSize": 14px,
		"gap": 12px,
		"loaderSize": 20px
	),
	"large": (
		"height": 44px,
		"padding": 0px 20px,
		"fontSize": 16px,
		"gap": 16px,
		"loaderSize": 24px
	)
);
/**
:host selects the host element.
in this case it is `f-button`
**/
:host {
	// inner element used to apply all styles
	.f-button {
		@include base();
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		text-transform: uppercase;
		color: var(--color-surface-default);
		flex: 1 0 auto;
		vertical-align: top;
		width: fit-content;

		// class to appply shimmer . This class is applied through javascript please check f-button.ts
		&.hasShimmer {
			@include shimmer-self();
		}

		&.custom-loader {
			&[loading] {
				svg {
					fill: inherit !important;
					stroke: none;
					*[fill^="var(--color-primary-default)"] {
						fill: inherit !important;
					}
				}
			}
		}

		&.custom-hover {
			&:hover {
				opacity: 0.9;
			}
		}

		@each $state, $color in $states {
			&[state="#{$state}"][category="fill"] {
				background-color: map.get($color, "background");
				border: 1px solid map.get($color, "background"); // added to match width of outline category
				// hover changes background
				&:hover {
					background-color: map.get($color, "hover");
					border: 1px solid map.get($color, "hover");
				}
				// if loading attribute specified then change background, border, color and svg
				&[loading] {
					background-color: map.get($color, "loading");
					border: 1px solid map.get($color, "loading");
					color: transparent;
					svg path.loader-fill {
						fill: map.get($color, "background");
					}
				}
			}

			// outline category states styles, where backgrounds are transparent
			&[state="#{$state}"][category="outline"] {
				background-color: transparent;
				border: 1px solid map.get($color, "background");
				color: map.get($color, "background");
				&:hover {
					border: 1px solid map.get($color, "hover");
					color: map.get($color, "hover");
				}

				&[loading] {
					border: 1px solid map.get($color, "background");
					color: transparent;
					svg path.loader-fill {
						fill: map.get($color, "background");
					}
				}
			}
			//transparent category with transparent background and border
			&[state="#{$state}"][category="transparent"],
			&[state="#{$state}"][category="packed"] {
				background-color: transparent;
				border: 1px solid transparent;
				color: map.get($color, "background");
				&:hover {
					border: 1px solid transparent;
					color: map.get($color, "hover");
				}
				&[loading] {
					color: transparent;
					svg path.loader-fill {
						fill: map.get($color, "background");
					}
				}
			}
		}

		/**
  * Iterating over sizes with padding, fontsize, height
  **/
		@each $size, $value in $sizes {
			&[size="#{$size}"] {
				font-size: map.get($value, "fontSize");
				&[variant="round"] {
					border-radius: var(--input-border-radius-round);
				}
				&[category="packed"] {
					padding: 0px;
				}
				&:not([category="packed"]) {
					height: map.get($value, "height");
					padding: map.get($value, "padding");
				}

				f-counter {
					margin-left: map.get($value, "gap");
				}

				> .left-icon {
					margin-right: map.get($value, "gap");
				}
				> .right-icon {
					margin-left: map.get($value, "gap");
				}

				&[loading] {
					svg {
						height: map.get($value, "loaderSize");
					}
				}
			}
		}

		// if variant is curved then apply 4px border radius
		&[variant="curved"] {
			border-radius: var(--input-border-radius-curved);
		}

		&[variant="block"] {
			display: flex;
			flex: 1 1 auto;
			width: 100%;
		}
		// disabled button will use `disabled()` mixins
		&[disabled] {
			@include disabled();
			opacity: 1;
		}
		// loading use `rotate` mixins
		&[loading] {
			@include rotate("svg");
			pointer-events: none;

			svg {
				position: absolute;
			}
		}
	}
	&:focus-visible,
	&:focus,
	button:focus-visible,
	button:focus {
		outline: none;
	}
}