// // Buttons //

/* Button Styles ————————————*/ /* General Button Styles */ .btn {

position: relative;
transition: .2s ease;
cursor: pointer;

&:focus,
&:active:focus,
&.active:focus {
  outline: 0 none;
  box-shadow: none;
}

}

/* Button Content ————————————*/ .u-btn-content {

white-space: normal;

}

/* Buttons Only Icon (O) ————————————*/ .u-btn-only-icon {

position: relative;
i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

}

/* Button Sizes ————————————*/ // // e.g. @include g-button-size ($padding-y, $padding-x, $font-size); //

/* Extra Small */ .btn-xs {

@include u-button-size (2px, 7px, 11px);

}

/* Medium */ .btn-md {

@include u-button-size (8px, 20px, 15px);

}

/* Extra Large */ .btn-xl {

@include u-button-size (13px, 26px, 18px);

}

/* Extramly Large */ .btn-xxl {

@include u-button-size (15px, 30px, 21px);

}

/* Button Types ————————————*/ // Inset @import “inset/button-inset”;

// Button 3d @import “3d/button-3d”;

// Button 3d @import “skew/button-skew”;

/* Button Hovers ————————————*/

class*=“u-btn-hover”

{

z-index: 1;

&:hover {
  text-decoration: none;
}
&:focus {
  text-decoration: none;
}

&::after {
  position: absolute;
  content: "";
  z-index: -1;
  transition: all .3s;
}

}

// Hover v1-1 @import “hovers/button-hover-v1-1”;

// Hover v1-2 @import “hovers/button-hover-v1-2”;

// Hover v1-3 @import “hovers/button-hover-v1-3”;

// Hover v1-4 @import “hovers/button-hover-v1-4”;

// Hover v2-1 @import “hovers/button-hover-v2-1”;

// Hover v2-2 @import “hovers/button-hover-v2-2”;

/* Flat Buttons ————————————*/ @import “flat/button-flat”;

/* Outline Buttons ————————————*/ @import “outline/button-outline”;

/* Gradient Buttons ————————————*/ @import “gradient/button-gradients”;

/* Gradient Outline Buttons ————————————*/ @import “gradient-ouline/button-ouline-gradients”;