////
/// @group buttons
/// @author Scott Casey
////
@use '../generic_scss/textLevel';
//- Our basic button styling
/// The basic stylings for a button like object. Provides some basic coloring, shadowing, and hover/active state styling
@mixin base-button{
	background-color: #DCDCDC33;
	border-radius: 5px;
	box-shadow: 0 2px 4px black;
	border-width: 0;
	transition: {
		property:box-shadow,backdrop-filter;
		duration:200ms;
		timing-function:ease-out;
	};
	backdrop-filter:blur(1px);
	overflow:hidden;
	&:is(:hover,:focus){
		background-color: #85858580;
		box-shadow: 0 4px 6px black;
		backdrop-filter:blur(2px);
	}
	&:active{
		background-color: #858585ff;
		box-shadow: 0 1px 2px black;
		backdrop-filter:blur(0px);
	}
}
//- Styling for our dice buttons
/// Basic styling for dice icon buttons using the dicefonts (e.g. dicefontd20).
@mixin die-button{
	@include base-button;
	line-height: 14px;
	/*height to vertically center a 2rem dicefontd10*/
	font-size: 2rem;
	font-weight: normal;
	font-style: normal;
	padding: 5px 3px 7px;
}
//- styling for buttons that have standard text in them
/// Basic styling for buttons with text (or text and icons)
@mixin text-button{
	padding: 5px 7px;
	@include base-button;
}
/// Styling for our roll buttons
@mixin roller{
  display: flex;
  align-items: center;
  gap: var(--half-gap);
  &:before{
    content:'T';
    font-family:dicefontd20;
  }
}
/// Ensures our buttons use the pointer cursor and that our roller construct buttons use the proper styling.
@mixin button{
  button{
    cursor: pointer;
  }
	.roller{
		@include roller;
	}
}