<commit_before>//
// Buttons & special 
// --------------------------------------------------

// Default button
.btn {
    @include transition(all 0.1s ease-out);
    @include border-radius(1px);
	position: relative;
	font-family: $font-family-heavy;
    font-size: $font-size-large;
    line-height: $base-line-height;
    padding: $base-padding/2 $base-padding;
    display: inline-block;
    border: 1px solid $button-border-color;
    background-color: $button-bg-color;
    color: $button-color; 
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    vertical-align: top;
    
    // Button with an icon
	&.btn-iconed {
		position: relative;
		padding-left: $base-padding*3.5;
		
		.flaticon, .icon {
			padding: 0 $base-padding/2 0 $base-padding/2;
			position: absolute;
			top: 0;
			left: 0;
			width: 2em;
			height: 100%;
			line-height: 2.25em;
	        display: inline-block;
	        background: $button-iconed-icon-bg-color; 
	        color: $button-iconed-icon-color;
	        text-align: center;
			vertical-align: middle;
	    }
	    
	    .flaticon {
	        font-size: 24px;
	    }
	    
	    .icon {
	    	font-family: $font-family-bold;
	    	font-size: 32px;
	    	font-style: normal;
	    }
	    
	    &:hover {
    	
        	.flaticon, .icon {
            	background-color: $button-iconed-hover-icon-bg-color;
            	color: $button-iconed-hover-icon-color;
			}
		}

		&:active {
		    padding-left: $base-padding*3.5;
		    
			.flaticon, .icon {
            	background: $button-iconed-active-icon-bg-color;
				color: $button-iconed-active-icon-color;
			}
		
		}
	}
    
    // Primary buttons
    &.btn-primary {
    	border: 1px solid $button-primary-border-color; 
		background-color: $button-primary-bg-color;
		
		&.btn-iconed {
		
			.flaticon, .icon {
				background-color: $button-primary-icon-bg-color;
				color: $button-primary-icon-color;
			}
		}
	}

    &.disabled, &[disabled],
    &.disabled:hover, &[disabled]:hover,
    &.disabled:active, &[disabled]:active {
        border-top-width: 1px;
        top: auto;
        border-color: $button-disabled-border-color !important;
        background: $button-disabled-bg-color !important;
        color: $button-disabled-color !important;
        cursor: default;

        .flaticon, .icon {
            background: $button-disabled-icon-bg-color !important;
            color: $button-disabled-icon-color !important;
        }<commit_msg>prepare button loaders<commit_after>//
// Buttons & special 
// --------------------------------------------------

// Default button
.btn {
    @include transition(all 0.1s ease-out);
    @include border-radius(1px);
	position: relative;
	font-family: $font-family-heavy;
    font-size: $font-size-large;
    line-height: $base-line-height;
    padding: $base-padding/2 $base-padding;
    display: inline-block;
    border: 1px solid $button-border-color;
    background-color: $button-bg-color;
    color: $button-color; 
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    vertical-align: top;
    
    // Button with an icon
	&.btn-iconed {
		position: relative;
		padding-left: $base-padding*3.5;
		
		.flaticon, .icon {
			padding: 0 $base-padding/2 0 $base-padding/2;
			position: absolute;
			top: 0;
			left: 0;
			width: 2em;
			height: 100%;
			line-height: 2.25em;
	        display: inline-block;
	        background: $button-iconed-icon-bg-color; 
	        color: $button-iconed-icon-color;
	        text-align: center;
			vertical-align: middle;
	    }
	    
	    .flaticon {
	        font-size: 24px;
	    }
	    
	    .icon {
	    	font-family: $font-family-bold;
	    	font-size: 32px;
	    	font-style: normal;
	    }
	    
	    &:hover {
    	
        	.flaticon, .icon {
            	background-color: $button-iconed-hover-icon-bg-color;
            	color: $button-iconed-hover-icon-color;
			}
		}

		&:active {
		    padding-left: $base-padding*3.5;
		    
			.flaticon, .icon {
            	background: $button-iconed-active-icon-bg-color;
				color: $button-iconed-active-icon-color;
			}
		
		}
	}

    &.is-loading {
        @include transition(none);
        @include box-shadow(none);
        background: image-url("loaders/loader-button-darkgrey.gif") #D8D8D8 no-repeat 50% 50% !important;
        background-size: 32px !important;
        @include hide-text();

        &:hover {
            @include box-shadow(none);
        }
    }
    
    // Primary buttons
    &.btn-primary {
    	border: 1px solid $button-primary-border-color; 
		background-color: $button-primary-bg-color;
		
		&.btn-iconed {
		
			.flaticon, .icon {
				background-color: $button-primary-icon-bg-color;
				color: $button-primary-icon-color;
			}
		}
	}

    &.disabled, &[disabled],
    &.disabled:hover, &[disabled]:hover,
    &.disabled:active, &[disabled]:active {
        border-top-width: 1px;
        top: auto;
        border-color: $button-disabled-border-color !important;
        background: $button-disabled-bg-color !important;
        color: $button-disabled-color !important;
        cursor: default;

        .flaticon, .icon {
            background: $button-disabled-icon-bg-color !important;
            color: $button-disabled-icon-color !important;
        }
{'fraction_non_alphanumeric': 0.15681860814106172, 'fraction_numerical': 0.012192834365034703, 'mean_word_length': 2.0073322053017484, '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': '3130988', 'n_tokens_mistral': 1973, 'n_tokens_neox': 1758, 'n_words': 326}