<commit_before>// button styling and their variants

#{$htmlNamespace} {

	// define base button styles for all buttons which can be included using the @extend 
	%button {
		@include appearance(none);
		@include border-radius(5px);
		text-align: center;
		border:0;
		cursor: pointer;
		margin: .8em .25em 0 0;
		padding: 0.35em 0.5em 0.15em;
		text-decoration: none;
		position: relative;
		-webkit-font-smoothing:antialiased;
		font: {
			size:1.9rem;
			weight: 500;
	    }   
	    
	    .ie & {
		    font-size: 19px;
	    }
	    
		.ie7 & {
		   padding: .2em 1em;
		   float: left;
		}
		
		.ie8 & {
		   padding: .4em 1em;
		}
		
		&:focus {
		   outline: 3px solid $yellow;
	    }
	    
	    &:active {
	    	@include box-shadow(0 0 0 transparent);	
			top: 2px;
			.ie7 &, .ie8 & {
			   top: 0;
			}
		}
	    
	    &:before {
		   content: "";
		   background: transparent;
		   width: 100%;
		   height: 40px;
		   display: block;
		   position: absolute;
		   top: -2px;
		   left: 0;
	   }
	     
	}

	// primary button (generally green in colour)
	.button {
		@extend %button;
		@include box-shadow(0 2px 0 darken($green, 10%));
		color: $white;
		background: $green;
		
		&:hover,
		&:active,
		&:visited {
		   color: $white;
		}
		
		&:hover,
		&:active {
		   background: darken($green, 5%);
		}
	   
	}
	
	// secondary button (usually grey)
	.button-secondary {
	   @extend %button;
	   @include box-shadow(0 2px 0 darken(#dee0e2, 20%));
	   background: $grey-3;
	   color: $black;
	   
	   &:hover,
	   &:active {
		   background: darken($grey-3, 5%);
		   color: $black;
	   }
	   
    }
	
	// button that looks like a text link
	.button-text {
	   @extend %button;
	   @include box-shadow(0 0 0 transparent);
	   background: none;
	   color:$link-colour;
	   text-decoration: underline;
	   
	   &:hover,
	   &:active {
		   color:$link-hover-colour;
	   }
	   
	   &:active {
		   top:0;
	   }
	   
	}
	
	// button styling for "out of scope"
	.button-not-implemented {
		@extend %button;
		@include box-shadow(0 2px 0 darken($baby-pink, 10%));
		background: lighten($baby-pink, 10%);
		cursor: not-allowed;
		color: lighten($baby-pink, 20%);
		
		&:hover,
		&:active {<commit_msg>Styles for warning button<commit_after>// button styling and their variants

#{$htmlNamespace} {

	// define base button styles for all buttons which can be included using the @extend 
	%button {
		@include appearance(none);
		@include border-radius(5px);
		text-align: center;
		border:0;
		cursor: pointer;
		margin: .8em .25em 0 0;
		padding: 0.35em 0.5em 0.15em;
		text-decoration: none;
		position: relative;
		-webkit-font-smoothing:antialiased;
		font: {
			size:1.9rem;
			weight: 500;
	    }   
	    
	    .ie & {
		    font-size: 19px;
	    }
	    
		.ie7 & {
		   padding: .2em 1em;
		   float: left;
		}
		
		.ie8 & {
		   padding: .4em 1em;
		}
		
		&:focus {
		   outline: 3px solid $yellow;
	    }
	    
	    &:active {
	    	@include box-shadow(0 0 0 transparent);	
			top: 2px;
			.ie7 &, .ie8 & {
			   top: 0;
			}
		}
	    
	    &:before {
		   content: "";
		   background: transparent;
		   width: 100%;
		   height: 40px;
		   display: block;
		   position: absolute;
		   top: -2px;
		   left: 0;
	   }
	     
	}

	// primary button (generally green in colour)
	.button {
		@extend %button;
		@include box-shadow(0 2px 0 darken($green, 10%));
		color: $white;
		background: $green;
		
		&:hover,
		&:active,
		&:visited {
		   color: $white;
		}
		
		&:hover,
		&:active {
		   background: darken($green, 5%);
		}
	   
	}
	
	// secondary button (usually grey)
	.button-secondary {
	   @extend %button;
	   @include box-shadow(0 2px 0 darken(#dee0e2, 20%));
	   background: $grey-3;
	   color: $black;
	   
	   &:hover,
	   &:active {
		   background: darken($grey-3, 5%);
		   color: $black;
	   }
	   
    }
    
    // secondary button (usually grey)
	.button-warning {
	   @extend %button;
	   @include box-shadow(0 2px 0 darken($red, 25%));
	   background: $red;
	   color:$white;
	   
	   &:hover,
	   &:active {
		   background: darken($red, 5%);
		   color: $white;
	   }
	   
    }
	
	// button that looks like a text link
	.button-text {
	   @extend %button;
	   @include box-shadow(0 0 0 transparent);
	   background: none;
	   color:$link-colour;
	   text-decoration: underline;
	   
	   &:hover,
	   &:active {
		   color:$link-hover-colour;
	   }
	   
	   &:active {
		   top:0;
	   }
	   
	}
	
	// button styling for "out of scope"
	.button-not-implemented {
		@extend %button;
		@include box-shadow(0 2px 0 darken($baby-pink, 10%));
		background: lighten($baby-pink, 10%);
		cursor: not-allowed;
		color: lighten($baby-pink, 20%);
		
		&:hover,
		&:active {
{'fraction_non_alphanumeric': 0.14556288572036605, 'fraction_numerical': 0.03192168546499255, 'mean_word_length': 2.122923588039867, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2963844', 'n_tokens_mistral': 2163, 'n_tokens_neox': 1708, 'n_words': 422}