@import "./mixins/variables";
@import "./mixins/mixins";

//默认 flat 样式.
.u-button {
  background: transparent;
  border: none;
  border-radius: $button-border-radius;
  color: $button-secondary-color;
  position: relative;
  // height: $button-height;
  min-width: $button-min-width;
  padding: $button-padding;
  display: inline-block;
  @include typo-button();
  overflow: hidden;
  will-change: box-shadow, transform;
  transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
  background-color 0.2s $animation-curve-default,
  color 0.2s $animation-curve-default;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: $button-line-height;
  vertical-align: middle;
  font-family:$preferred_font;
  &::-moz-focus-inner {
    border: 0;
  }

  &:hover {
    background-color: $button-hover-color;
  }

  &:focus:not(:active) {
    background-color: $button-focus-color;
  }

  &:active {
    background-color: $button-active-color;
  }

  &.colored {
    color: $button-primary-color-alt;

    &:focus:not(:active) {
      background-color: $button-focus-color-alt;
    }
  }
  &.disable{
    webkit-box-shadow: none;
    filter: alpha(opacity=65);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .65;
  }
}

input.u-button[type="submit"] {
  -webkit-appearance:none;
}

// Raised buttons
.u-button.waves-effect{

  border:1px $button-border-color solid;
  font-size: 13px;
  background: $button-primary-color;
  background: $button-primary-color-IE8 \9;
  // @include shadow-2dp();

  &:active {
    @include shadow-4dp();
    background-color: $button-active-color;
  }

  &:focus:not(:active) {
    @include focus-shadow();
    background-color: $button-active-color;
  }

  &.colored {
    background: $button-primary-color-alt;
    color: $button-secondary-color-alt;

    &:hover {
      background-color: $button-hover-color-alt;
    }

    &:active {
      background-color: $button-active-color-alt;
    }

    &:focus:not(:active) {
      background-color: $button-active-color-alt;
    }

    background: $button-ripple-color-alt;
  }

  &.u-button-xg{
    font-size : $font-size-xg;
  }

  &.u-button-lg{
    font-size : $font-size-lg;
  }

  &.u-button-sm{
    font-size : $font-size-sm;
  }
}

//Floating bottons
.u-button.floating {
  border-radius: 50%;
  font-size: $button-fab-font-size;
  height: $button-fab-size;
  height: 38px \9;
  margin: auto;
  min-width: $button-fab-size;
  width: $button-fab-size;
  width: 38px \9;
  padding: 0;
  overflow: hidden;
  background: $button-primary-color;
  background: $button-primary-color-IE8 \9;
  // box-shadow: 0 1/16 * $unit 1.5/16 * $unit 0 rgba(0,0,0,0.12), 0 1/16 * $unit 1/16 * $unit 0 rgba(0,0,0,0.24);
  // box-shadow: 0 1/16 * $unit 1.5/16 * $unit 0 rgb(0,0,0), 0 1/16 * $unit 1/16 * $unit 0 rgb(0,0,0) \9;
  position: relative;
  line-height: normal;
  border: 1px solid $button-border-color;
  & .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
    line-height: $button-fab-font-size;
    width: $button-fab-font-size;
    width: auto \9;
    position:relative \9;
    top:0px \9;
    left:0px \9;
    padding: 0px;
  }

  &.mini {
    height: $button-fab-size-mini;
    min-width: $button-fab-size-mini;
    width: $button-fab-size-mini;
  }
  &.flat{
    background: transparent;
    border: none;
    box-shadow: none;
  }

  & .u-button-container {
    border-radius: 50%;
    // Fixes clipping bug in Safari.
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
  }

  &:active {
    @include shadow-4dp();
    background-color: $button-active-color;
  }

  &:focus:not(:active) {
    @include focus-shadow();
    background-color: $button-active-color;
  }

  &.colored {
    background: $button-fab-color-alt;
    color: $button-fab-text-color-alt;

    &:hover {
      background-color: $button-fab-hover-color-alt;
    }

    &:focus:not(:active) {
      background-color: $button-fab-active-color-alt;
    }

    &:active {
      background-color: $button-fab-active-color-alt;
    }
    background: $button-fab-ripple-color-alt;
  }
}

// Ripples
.u-button-container {
  display: block;
  height: 100%;
  left: 0/16 * $unit;
  position: absolute;
  top: 0/16 * $unit;
  width: 100%;
  z-index: 0;
  overflow: hidden;

  .u-button[disabled],
  .u-button.disabled {
    background-color: transparent;
  }
}

.u-button.primary {
  color: $button-primary-color-alt;
  background: $button-secondary-color-alt;
  &.raised,&.floating{
    color: $button-secondary-color-alt;
    background-color: $button-primary-color-alt;
    border:1px  $button-primary-color-alt solid;
    &:hover{
      background-color: $button-primary-color-alt;
    }
  }
   &:hover {
    background-color: $button-hover-color;
  }
}

.u-button.accent {
  color: $button-fab-color-alt;
  background: $button-fab-text-color-alt;
  
  &.raised,&.floating{
    color: $button-fab-text-color-alt;
    background-color: $button-fab-color-alt;
    border:1px  $button-fab-color-alt solid;
    &:hover{
      background-color: $button-fab-color-alt;
    }
  }
   &:hover {
    background-color: $button-hover-color;
  }
}

// Disabled buttons


// Align icons inside buttons with text
.u-button .fa {
  vertical-align: middle;
}


// Icon buttons
.u-button-icon {
  border-radius: 50%;
  font-size: $button-fab-font-size;
  height: $button-icon-size;
  margin-left: 0;
  margin-right: 0;
  min-width: $button-icon-size;
  width: $button-icon-size;
  padding: 0;
  overflow: hidden;
  color: inherit;
  line-height: normal;

  & .fa {
    //position: absolute;
    //top: 50%;
    //left: 50%;
    //transform: translate(- $button-fab-font-size / 2, - $button-fab-font-size / 2);
    //line-height: $button-fab-font-size;
    //width: $button-fab-font-size;
  }

  &.u-button-mini-icon {
    height: $button-icon-size-mini;
    min-width: $button-icon-size-mini;
    width: $button-icon-size-mini;

    & .fa {
      top: ($button-icon-size-mini - $button-fab-font-size) / 2;
      left: ($button-icon-size-mini - $button-fab-font-size) / 2;
    }
  }

  & .u-button-ripple-container {
    border-radius: 50%;
    // Fixes clipping bug in Safari.
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
  }
}


// 扩展样式

//success按钮
.u-button-success {
    color: #fff;
    background-color: #4caf50;
    border-color: #4caf50;
}

.u-button-success.focus, .u-button-success:focus, .u-button-success:hover {
    background-color: #66bb6a;
    border-color: #66bb6a;
}

.u-button-success.active, .u-button-success:active, .open>.dropdown-toggle.u-button-success {
    background-color: #43a047;
    border-color: #43a047;
}

.u-button.active, .u-button:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}


.u-button.active:focus, .u-button:active:focus, .u-button:focus {
    outline: 0;
}
//info按钮
.u-button-info {
    color: #fff;
    background-color: #00bcd4;
    border-color: #00bcd4;
}

.u-button-info.focus, .u-button-info:focus, .u-button-info:hover {
    background-color: #26c6da;
    border-color: #26c6da;
}

.u-button-info.active, .u-button-info:active, .open>.dropdown-toggle.u-button-info {
    background-color: #00acc1;
    border-color: #00acc1;
}

.u-button-warning {
    color: #fff;
    background-color: #ff9800;
    border-color: #ff9800;
}

.u-button-warning.focus, .u-button-warning:focus, .u-button-warning:hover {
    background-color: #ffa726;
    border-color: #ffa726;
}

.u-button-warning.active, .u-button-warning:active, .open>.dropdown-toggle.u-button-warning {
    background-color: #fb8c00;
    border-color: #fb8c00;
}


.u-button-danger {
    color: #fff;
    background-color: #f44336;
    border-color: #f44336;
}

.u-button-danger.focus, .u-button-danger:focus, .u-button-danger:hover {
    background-color: #ef5350;
    border-color: #ef5350;
}

.u-button-danger.active, .u-button-danger:active, .open>.dropdown-toggle.u-button-danger {
    background-color: #e53935;
    border-color: #e53935;
}

//大型
.u-button-lg {
    @include button-size($button-padding-y-lg, $button-padding-x-lg, $font-size-lg, $button-border-radius-lg);
}
//特大型
.u-button-xg {
 
  @include button-size($button-padding-y-xg, $button-padding-x-xg, $font-size-xg, $button-border-radius-xg);
}

//小型
.u-button-sm {
   @include button-size($button-padding-y-sm, $button-padding-x-sm, $font-size-sm, $button-border-radius-sm);
}
//方形按钮
.u-button-squared {
  border-radius: 0;
}

// 圆形按钮

.u-button-round {
  border-radius: 1000px;
}

//按钮充满整行
.u-button-block{
  white-space: normal;
  display: block;
  width: 100%;
}

//与.u-button-round连用创建左半圆
.u-button-pill-left {
  border-radius: 500px 0 0 500px;
}
//与.u-button-round连用创建右半圆
.u-button-pill-right {
  border-radius: 0 500px 500px 0;
}