@use 'textLevel';
@use 'borderPlaceholders';
//- Our basic button styling
%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
%die-button{
	@extend %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
%text-button{
	padding: 5px 7px;
	@extend %base-button;
}
//- Styling for our roll buttons
%roller{
  display: inline-flex;
  align-items: center;
  align-self:start;
  gap: var(--half-gap);
  color:var(--fontColor);
  &:before{
    content:'L';
    font-family:dicefontd6;
  }
}
%button{
  button{
    cursor: pointer;
  }
	.roller{
		display:flex;
		gap:var(--half-gap);
		align-items:center;
		&:before{
			font-family:dicefontd20;
			content:'T'
		}
	}
	.control-button{
		@extend %inputHighlight;
		align-self:center;
		padding-inline:var(--tiny-gap);
		transition: {
			property: background-color, color;
			duration: var(--revealTime);
			timing-function: ease;
		}
		&:hover{
			background-color:var(--borderColor);
			color:var(--backColor);
		}
	}
}