@use "sass:map";
// common mixins imported from this file
@import "./../../mixins/scss/mixins";

/**
$gaps map hold gap attribute related values
**/
$gaps: (
	"none": 0px,
	"x-large": 24px,
	"large": 16px,
	"medium": 12px,
	"small": 8px,
	"x-small": 4px
);

/**
$states map will have state specific inner maps.
**/
$states: (
	"transparent": (
		"background": transparent,
		"hover": var(--color-surface-subtle-hover),
		"selected": var(--color-surface-subtle-selected),
		"border": var(--color-primary-default),
		"color": var(--color-text-default)
	),
	"subtle": (
		"background": var(--color-surface-subtle),
		"hover": var(--color-surface-subtle-hover),
		"selected": var(--color-surface-subtle-selected),
		"border": var(--color-primary-default),
		"color": var(--color-text-subtle)
	),
	"default": (
		"background": var(--color-surface-default),
		"hover": var(--color-surface-default-hover),
		"selected": var(--color-surface-default-selected),
		"border": var(--color-primary-default),
		"color": var(--color-text-default)
	),
	"secondary": (
		"background": var(--color-surface-secondary),
		"hover": var(--color-surface-secondary-hover),
		"selected": var(--color-surface-secondary-selected),
		"border": var(--color-primary-default),
		"color": var(--color-text-secondary)
	),
	"tertiary": (
		"background": var(--color-surface-tertiary),
		"hover": var(--color-surface-tertiary-hover),
		"selected": var(--color-surface-tertiary-selected),
		"border": var(--color-primary-default),
		"color": var(--color-text-default)
	),
	"success": (
		"background": var(--color-success-surface),
		"hover": var(--color-success-surface-hover),
		"selected": var(--color-success-surface-selected),
		"border": var(--color-success-default),
		"color": var(--color-success-text)
	),
	"primary": (
		"background": var(--color-primary-surface),
		"hover": var(--color-primary-surface-hover),
		"selected": var(--color-primary-surface-selected),
		"border": var(--color-primary-default),
		"color": var(--color-primary-text)
	),
	"warning": (
		"background": var(--color-warning-surface),
		"hover": var(--color-warning-surface-hover),
		"selected": var(--color-warning-surface-selected),
		"border": var(--color-warning-default),
		"color": var(--color-warning-text)
	),
	"danger": (
		"background": var(--color-danger-surface),
		"hover": var(--color-danger-surface-hover),
		"selected": var(--color-danger-surface-selected),
		"border": var(--color-danger-default),
		"color": var(--color-danger-text)
	),
	"custom": (
		"background": transparent,
		"hover": var(--color-surface-subtle-hover),
		"selected": var(--color-surface-subtle-selected),
		"border": var(--color-primary-default),
		"color": var(--color-text-default)
	)
);
/**
applies styles on f-div
**/
f-div {
	// Important :  always include base mixins
	@include base();
	display: flex;
	position: relative;
	font-weight: 400;
	font-size: 14px;
	color: var(--color-text-default);
	// iterating over gaps and appying respective css
	@each $gap, $value in $gaps {
		&[gap="#{$gap}"] {
			gap: $value;
		}
	}

	&.f-div-custom-width {
		--max-width: none; /* Define a CSS variable */
		max-width: var(--max-width) !important;
	}

	&.f-div-custom-height {
		--max-height: none; /* Define a CSS variable */
		max-height: var(--max-height) !important;
	}

	&[highlight] {
		position: relative;
		z-index: 1001; /* set a higher z-index for the highlighted div to place it above the overlay */
	}
	// iterating over states and appyling respective css
	@each $state, $value in $states {
		&[state^="#{$state}"] {
			// include mixin for inheritance rules
			@include inheirt-parent($state);

			background-color: map.get($value, "background");

			color: map.get($value, "color");

			&[clickable] {
				&:hover {
					background-color: map.get($value, "hover");
					> f-div {
						&[state="inherit"] {
							--color-inherit-background: var(--color-inherit-background-hover);
							background-color: var(--color-inherit-background-hover);
						}
					}
				}
			}
			&.f-select-options-clickable {
				cursor: pointer;
				&[clickable] {
					&:hover {
						background-color: var(--color-surface-tertiary);
					}
				}
				&[selected="background"] {
					background-color: var(--color-surface-tertiary);
				}
				&.hover {
					background-color: var(--color-surface-tertiary);
				}
			}
			// if selected state is background
			&[selected="background"] {
				background-color: map.get($value, "selected");
			}
			// if selected state is border
			&[selected="border"] {
				background-color: var(--color-surface-default);
				border: 1px solid map.get($value, "border") !important;
			}
			// if selected state is notch-right, creating pseudo element to create notch
			&[selected="notch-right"] {
				&::after {
					position: absolute;
					right: 0;
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
					top: 4px;
					bottom: 4px;
					max-height: 48px;
					border-left: 4px solid map.get($value, "border");
					content: "";
				}
			}
			// if selected state is notch-left, creating pseudo element to create notch
			&[selected="notch-left"] {
				position: relative;
				&::after {
					border-right: 4px solid map.get($value, "border");
					content: "";
					position: absolute;
					left: 0;
					border-top-right-radius: 4px;
					border-bottom-right-radius: 4px;
					top: 4px;
					bottom: 4px;
					max-height: 48px;
				}
			}
		}
	}

	&[slot="label"] {
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		color: var(--color-text-default);
		width: fit-content;
	}
	&[slot="description"] {
		font-weight: 400;
		font-size: 12px;
		line-height: 18px;
		color: var(--color-text-secondary);
		width: fit-content;
	}
	&[slot="help"] {
		font-weight: 350;
		font-size: 12px;
		line-height: 18px;
		color: var(--color-help-text);
		width: fit-content;
	}

	&[state="inherit"] {
		background-color: var(--color-inherit-background);
		color: var(--color-inherit-text);
		&:hover {
			> f-div {
				&[state="inherit"] {
					--color-inherit-background: var(--color-inherit-background-hover);
					background-color: var(--color-inherit-background-hover);
				}
			}
		}
		&[clickable] {
			&:hover {
				background-color: var(--color-inherit-background-hover);
			}
		}
		// if selected state is background
		&[selected="background"] {
			background-color: var(--color-inherit-background-selected);
		}
		// if selected state is border
		&[selected="border"] {
			background-color: var(--color-surface-default);
			border: 1px solid var(--color-inherit-background-border) !important;
		}
		// if selected state is notch-right, creating pseudo element to create notch
		&[selected="notch-right"] {
			&::after {
				position: absolute;
				right: 0;
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
				top: 4px;
				bottom: 4px;
				max-height: 48px;
				border-left: 4px solid var(--color-inherit-background-border);
				content: "";
			}
		}
		// if selected state is notch-left, creating pseudo element to create notch
		&[selected="notch-left"] {
			position: relative;
			&::after {
				border-right: 4px solid var(--color-inherit-background-border);
				content: "";
				position: absolute;
				left: 0;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
				top: 4px;
				bottom: 4px;
				max-height: 48px;
			}
		}
	}

	// including disabled mixins to apply disabled css
	&[disabled] {
		@include disabled();
	}
	// applying cursor pointer on clickable attribute
	&[clickable] {
		cursor: pointer;
	}

	&[width="hug-content"] {
		flex: 0 0 auto;
		display: inline-flex;
		width: fit-content;
	}

	&[height="hug-content"] {
		height: fit-content;
	}

	&[direction="column"] {
		flex-direction: column;
		> f-div[height="fill-container"] {
			flex: 1 1;
			max-height: 100%;
		}
		> f-form-field {
			flex: 1 1;
			width: 100%;
			max-height: 100%;
		}
		> f-div[width="fill-container"] {
			width: 100%;
		}
		> f-form-builder,
		> f-accordion {
			width: 100%;
		}
		> f-accordion {
			flex: 0 0 auto;
		}
	}

	&[direction="row"] {
		flex-direction: row;
		> f-div[width="fill-container"] {
			flex: 1 1;
			max-width: 100%;
		}
		> f-form-field {
			flex: 1 1;
			max-width: 100%;
		}
		> f-div[height="fill-container"] {
			height: 100%;
		}
		> f-accordion {
			max-width: 100%;
		}
	}

	&[direction="row"] {
		&[align="top-left"] {
			align-items: flex-start;
			justify-content: flex-start;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="top-center"] {
			align-items: flex-start;
			justify-content: center;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="top-right"] {
			align-items: flex-start;
			justify-content: flex-end;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="middle-left"] {
			align-items: center;
			justify-content: flex-start;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="middle-center"] {
			align-items: center;
			justify-content: center;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="middle-right"] {
			align-items: center;
			justify-content: flex-end;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="bottom-left"] {
			align-items: flex-end;
			justify-content: flex-start;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="bottom-center"] {
			align-items: flex-end;
			justify-content: center;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="bottom-right"] {
			align-items: flex-end;
			justify-content: flex-end;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
	}

	&[direction="column"] {
		&[align="top-left"] {
			align-items: flex-start;
			justify-content: flex-start;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="top-center"] {
			align-items: center;
			justify-content: flex-start;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="top-right"] {
			align-items: flex-end;
			justify-content: flex-start;
		}
		&[align="middle-left"] {
			align-items: flex-start;
			justify-content: center;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="middle-center"] {
			align-items: center;
			justify-content: center;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="middle-right"] {
			align-items: flex-end;
			justify-content: center;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="bottom-left"] {
			align-items: flex-start;
			justify-content: flex-end;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="bottom-center"] {
			align-items: center;
			justify-content: flex-end;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
		&[align="bottom-right"] {
			align-items: flex-end;
			justify-content: flex-end;
			&[gap="auto"] {
				justify-content: space-between;
			}
		}
	}
	&[overflow="wrap"] {
		flex-wrap: wrap;
		overflow-y: auto;
	}
	&[overflow="scroll"] {
		overflow: auto;
	}
	/* Hide scrollbar for Chrome, Safari and Opera */
	&#f-tab-section::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	&#f-tab-section {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}
	&[overflow="hidden"] {
		overflow: hidden;
	}
	&[overflow="visible"] {
		overflow: visible;
	}

	&[sticky="top"] {
		position: sticky;
		top: 0px;
		z-index: 1;
	}
	&[sticky="bottom"] {
		position: sticky;
		bottom: 0px;
		z-index: 1;
	}
	&[sticky="left"] {
		position: sticky;
		left: 0px;
		z-index: 1;
	}
	&[sticky="right"] {
		position: sticky;
		right: 0px;
		z-index: 1;
	}

	&[loading="skeleton"] {
		@include shimmer-child();
	}
	&[loading="loader"] {
		@include rotate("svg");
		pointer-events: none;
		> *:not(svg) {
			visibility: hidden;
		}
		> svg {
			height: 24px;
			width: 24px;
			position: absolute;
			top: calc(50% - 12px);
			left: calc(50% - 12px);
		}
	}

	&[variant="curved"] {
		border-radius: 4px;
	}
}

f-div {
	f-icon-button {
		&[variant="block"] {
			display: flex;
			flex: 1 1 auto;
			width: auto;
		}
	}
}