@use 'sass:math';
@import './variables';

.s-btn {
	align-items: center;
	border-radius: $btn-border-radius;
	display: inline-flex;
	flex: 0 0 auto;
	overflow: hidden;
	position: relative;
	outline: 0;
	justify-content: center;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;
	text-decoration: none;
	transition-duration: $btn-transition-duration;
	transition-property: box-shadow, transform, opacity;
	background-color: var(--theme-app-bar);

	a,
	.s-icon {
		color: inherit;
	}

	.s-btn__content {
		display: flex;
		align-items: center;
		flex: 1 0 auto;
		color: inherit;
		justify-content: inherit;
		line-height: normal;
		position: relative;
		font-size: inherit;
		font-weight: map-deep-get($headings, 'button', 'weight');
		letter-spacing: map-deep-get($headings, 'button', 'letter-spacing');
		text-transform: map-deep-get($headings, 'button', 'text-transform');
	}

	@include elevation(2);

	// &:focus-visible {
	// 	box-shadow: 0 0 0 3px var(--theme-focus-visible);
	// }

	&::before {
		border-radius: inherit;
		bottom: 0;
		color: inherit;
		content: '';
		left: 0;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		transition: $btn-transition;
		background-color: currentColor;
	}

	@each $name, $size in $btn-font-sizes {
		&.size-#{$name} {
			font-size: $size;
		}
	}

	&:not(:disabled),
	&:not(.disabled) {
		@media screen and (any-hover: hover) and (pointer: fine) {
			&:hover::before {
				opacity: var(--s-btn-hover-opacity, $btn-hover-opacity);
			}
		}

		&.active::before {
			opacity: var(--s-btn-active-opacity, $btn-active-opacity);
		}

		&:focus-visible::before,
		&.focus-visible::before {
			opacity: var(--s-btn-focus-opacity, $btn-focus-opacity);
		}
	}

	&:not(.outlined) {
		@include has-theme-bg {
			color: map-deep-get($material-dark-theme, 'text', 'primary');
		}
	}

	&:not(.icon):not(.s-btn--fab) {
		@each $name, $size in $btn-sizes {
			&.size-#{$name} {
				height: #{$size}px;
				min-width: #{round($size * 1.777777777777778)}px; // default ratio
				padding: 0 #{math.div($size, 2.25)}px;
			}
		}
	}

	&:not(.disabled):not(.depressed) {
		will-change: box-shadow;
	}

	&.block {
		display: flex;
		flex: 1 0 auto;
		min-width: 100% !important;
		max-width: auto;
	}

	&.tile {
		border-radius: 0;
	}

	&.text {
		background-color: transparent;
	}

	&.depressed {
		box-shadow: none;
	}

	&.outlined {
		border: 1px solid currentColor;
		background-color: transparent !important;
	}

	&.rounded {
		border-radius: map-get($rounded, 'pill');
	}

	&.disabled,
	&:disabled {
		pointer-events: none;
		color: var(--theme-buttons-disabled);

		&:not(.flat):not(.text):not(.outlined) {
			background-color: var(--theme-buttons-disabled);
		}
	}

	&.icon {
		@each $name, $size in $btn-sizes {
			&.size-#{$name} {
				height: #{$size}px;
				width: #{$size}px;
			}
		}
	}

	&.icon,
	&.s-btn--fab {
		border-radius: 50%;
		min-width: 0;
		min-height: 0;
		padding: 0;
		@each $name, $size in $fab-icon-sizes {
			&.size-#{$name} .s-icon {
				font-size: #{$size}px;
			}
		}
	}

	&.s-btn--fab {
		@each $size, $value in $fab-sizes {
			&.size-#{$size} {
				height: #{$value}px;
				width: #{$value}px;
			}
		}
	}
}