.display-inline-no { display: none; }
    .display-filled-no { display: none; }
    .display-icon-no   { display: none; }
    .display-inline-no{ display: none; }
    .display-filled-no{ display: none; }
    .not-display-icon { display: none; }
    
    :root {
        --hoof-btn-border-radius:               4px;
        --hoof-btn-border-width:                1px;
        --hoof-btn-padding-x:                   0.5rem; 
        --hoof-btn-padding-y:                   0.375rem; 
        --hoof-btn-font-family:                 inherit;
        --hoof-btn-font-size: 				    1rem;
        --hoof-btn-font-weight: 				400;
        --hoof-btn-line-height:                 1.5;
        --hoof-btn-disable:                     0.65;
        --hoof-btn-shadow:                      0 4px 9px -4px;
        --hoof-btn-shadow-status:               0 8px 9px -4px var(--hoof-shadow-color-2), 0 4px 18px 0 var(--hoof-shadow-color-3)
    }
    
    .button {
        --btn-brand-color:                  var(--hoof-brand-color);
        --btn-border-color:                 var(--hoof-brand-color);
        --btn-border-radius:                var(--hoof-btn-border-radius);
        --btn-border-width:                 var(--hoof-btn-border-width);
        --btn-shadow:                       var(--hoof-btn-shadow);
        --btn-shadow-color:                 var(--hoof-shadow-color-1);
        --btn-shadow-status:                var(--hoof-btn-shadow-status);
    
        --btn-filled-on-color:              var(--hoof-on-color-2);
        --btn-filled-hover-color:           var(--hoof-dark-color-1);
        --btn-filled-hover-on-color:        var(--hoof-on-color-0);
        --btn-filled-active-color:          var(--hoof-dark-color-2);
        --btn-filled-active-on-color:       var(--hoof-on-color-0);            
        --btn-filled-disabled-color:        var(--hoof-surface-color-2);
        --btn-filled-disabled-on-color:     var(--hoof-brand-color);
        
        --btn-outlined-on-color:            var(--hoof-brand-color);
        --btn-outlined-hover-color:         var(--hoof-light-color-1);
        --btn-outlined-hover-on-color:      var(--hoof-on-color-1);
        --btn-outlined-active-color:        var(--hoof-light-color-2);
        --btn-outlined-active-on-color:     var(--hoof-brand-color);
        --btn-outlined-disabled-color:      var(--hoof-surface-color-3);
        --btn-outlined-disabled-on-color:   var(--hoof-on-color-3);
    
    
        --btn-padding-y:                    var(--hoof-btn-padding-y);
        --btn-padding-x:                    var(--hoof-btn-padding-x);
        --btn-font-family:                  var(--hoof-btn-font-family);
        --btn-font-size: 				    var(--hoof-btn-font-size);
        --btn-font-weight: 			        var(--hoof-btn-font-weight);
        --btn-line-height:                  var(--hoof-btn-line-height);
    
        
        color:                              var(--btn-brand-color);
        
        position:                           relative;
        display:                            flex;
        justify-content:                    center;
        align-items:                        center;
        padding: 						    var(--btn-padding-y) var(--btn-padding-x);
        font-family: 					    var(--btn-font-family);
        font-size: 						    var(--btn-font-size);
        font-weight: 					    var(--btn-font-weight);
        line-height: 					    var(--btn-line-height);
        text-align: 					    center;
        text-decoration: 				    none;
        vertical-align: 				    middle;
        cursor: 						    pointer;
        -webkit-user-select: 			    none;
        -moz-user-select: 				    none;
        user-select: 					    none;
        border: 						    var(--btn-border-width) solid var(--btn-border-color);
        border-radius: 					    var(--btn-border-radius);
        transition: 					    color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;        
    }
    .button--filled{
        color:                              var(--btn-filled-on-color);
        background-color:                   var(--btn-brand-color);
        border-color:                       var(--btn-border-color);
        box-shadow:                         var(--btn-shadow) var(--btn-shadow-color);
    }
    .button--outlined{
        color:                              var(--btn-outlined-on-color);
        background-color:                   transparent;
        border-color:                       var(--btn-border-color);
    }
    .button--filled:hover:not(.button--disabled){
        color:                              var(--btn-filled-hover-on-color);
        background-color:                   var(--btn-filled-hover-color);
        border-color:                       var(--btn-filled-hover-color);
        box-shadow: 			            var(--btn-shadow-status);
    }
    .button--filled:active:not(.button--disabled){
        color:                              var(--btn-filled-active-on-color);
        background-color:                   var(--btn-filled-active-color);
        border-color:                       var(--btn-filled-active-color);
        box-shadow: 			            var(--btn-shadow-status);
    }
    .button--filled.button--disabled{
        color:                              var(--btn-filled-disabled-on-color);
        background-color:                   var(--btn-filled-disabled-color);
        border-color:                       var(--btn-filled-disabled-color);
        opacity:                            0.70; 
    }
    .button--outlined:hover:not(.button--disabled){
        color:                              var(--btn-outlined-on-color);
        background-color:                   var(--btn-outlined-hover-color);
        border-color:                       var(--btn-border-color);
    }
    .button--outlined:active:not(.button--disabled){
        color:                              var(--btn-outlined-active-on-color);
        background-color:                   var(--btn-outlined-active-color);
        border-color:                       var(--btn-border-color);
    }
    .button--outlined.disabled{
        color:                              var(--btn-brand-color);
        background-color:                   transparent;
        border-color:                       var(--btn-brand-color);
        opacity:                            0.5;
    }
    .button--small{
        --btn-padding-y: 		            calc(var(--hoof-btn-padding-y) * 0.5); 
        --btn-padding-x: 			        calc(var(--hoof-btn-padding-x) * 0.75); 
        --btn-font-size: 			        0.875rem;
    }
    .button--xsmall{
        --btn-padding-y: 			        calc(var(--hoof-btn-padding-y) * 0.75); 
        --btn-padding-x: 			        calc(var(--hoof-btn-padding-x) * 0.75); 
        --btn-font-size: 			        0.75rem;
    }
    .button--medium{
        --btn-padding-y: 			        0.25rem;
        --btn-padding-x: 			        0.6rem;
        --btn-font-size: 			        0.85rem;
    }
    .button--large{
        --btn-padding-y: 			        calc(var(--hoof-btn-padding-y) * 1.25); 
        --btn-padding-x: 			        calc(var(--hoof-btn-padding-x) * 1.25); 
        --btn-font-size:          	        1rem;
        --btn-border-radius: 		        calc(var(--hoof-btn-border-radius)*1.5);
    }
    .button--100{
        width: 100%;
        --btn-font-size:                    1rem;
    }
    .button--rounded{
        border-radius:                      9999px;
    }
    .button--border-none{
        border-color:                       transparent                         !important;
    }