@import '../dao-variables.scss';
@import '../dao-mixins.scss';
@import './variables.scss';
@import './mixins.scss';

// Base styles
// --------------------------------------------------
.dao-btn {
  display: inline-block;
  font-weight: $btn-font-weight;

  border: $input-btn-border-width solid transparent;
  outline: none !important; // TODO 加上这边的备注
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214

  cursor: pointer;
  user-select: none;
  text-align: center;
  white-space: nowrap;

  height: 32px; // fixed button height for firefox28

  @include box-sizing('border-box');
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius-base);
  @include transition(all 0.2s ease-in-out);
  @include hover-focus {
    text-decoration: none;
  }
  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      @include tab-focus();
    }
  }
  &.focus {
    text-decoration: none;
  }
  &:active,
  &.active {
    outline: 0;
    background-image: none;
  }
}

// .dao-btn default style
.dao-btn {
  color: $black-dark;
  border-color: $grey-light;
  background-color: $white;
  background-image: linear-gradient(to bottom, rgba($grey-dark, 0),
      rgba($grey-dark, 0.1));
  &:hover {
    background-color: $white;
    background-image: linear-gradient(rgba($grey-lighter, 0.1), rgba($grey-lighter, 0.1));
  }
  &:active,
  &.active {
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.08), inset 0 1px 3px 0 rgba(0, 0, 0, 0.06);
    background-image: linear-gradient(to bottom, rgba($grey-lighter, 0.1),
      rgba($grey-lighter, 0.1));
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    color: $grey-light;
    pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
    cursor: $cursor-disabled;
  }
  svg.icon {
    // 为了配合解决 dao-btn 在最新版 firefox 下面 svg 偏下的问题
    vertical-align: top;
    & + .text {
      // 为了解决 dao-btn 在最新版 firefox 下面 svg 偏下的问题
      vertical-align: top;
    }
  }
}

a.dao-btn {
  &.disabled,
  fieldset[disabled] & {
    pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
  }
}

.dao-btn.ghost {
  color: $black-dark;
  border-color: $grey-light;
  background: none;

  @include box-shadow($btn-disabled-box-shadow);
  @include text-shadow($btn-disabled-text-shadow);
  &:hover {
    background-color: rgba($grey-light, 0.1);
  }
  &:active,
  &.active {
    background-color: rgba($grey-light, 0.15);
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.08), inset 0 1px 3px 0 rgba(0, 0, 0, 0.06);
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    color: $grey-light;
    cursor: $cursor-disabled;
    pointer-events: none;
    opacity: 1;
  }
}

@each $key, $value in $buttons {
  $generate-colors: generate-color($value);
  .dao-btn.#{$key} {
    @include button-variant(#FFFFFF, $value, map_get($generate-colors, 'border'));
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
      color: $white;
      opacity: 0.7;
    }
  }
  // TODO 在生产环境的时候删除这段代码
  .color-card {
    @include clearfix();
    &.#{$key} {
      > div {
        display: block;
        float: left;

        width: 50px;
        height: 50px;
      }
      > div:first-child {
        background-color: map_get($generate-colors, 'lighten');
      }
      > div:nth-child(2) {
        background-color: map_get($generate-colors, 'base');
      }
      > div:nth-child(3) {
        background-color: map_get($generate-colors, 'border');
      }
      > div:nth-child(4) {
        background-color: map_get($generate-colors, 'darken');
      }
    }
  }
}

// .dao-btn.mini style
.dao-btn.mini{
  background:none;
  border: none;
  @include box-shadow($btn-disabled-box-shadow);
  @include text-shadow($btn-disabled-text-shadow);
  &:hover, &:active, &.active {
    background-image: none;
    @include box-shadow($btn-disabled-box-shadow);
  }
  &.grey {
    color: $black-dark;
    &:hover, &:active, &.active {
      background-color: rgba($grey-dark, 0.25);
    }
  }
  &.blue {
    color: #217ef2;
    &:hover, &:active, &.active {
      background-color: rgba($blue, 0.15);
    }
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    color: $grey-light;
    cursor: $cursor-disabled;
    opacity: 1;
    pointer-events: none;
  }
}




// .dao-btn has svg icon
.dao-btn {
  $btn-has-icon-compact-padding-x: 9px;
  svg {
    width: $btn-svg-size;
    height: $btn-svg-size;

    fill: currentColor;
  }
  &.dao-icon {
    padding-left: $btn-icon-padding-x;
    padding-right: $btn-icon-padding-x;
  }
  &.has-icon {
    padding-left: $btn-has-icon-compact-padding-x;
    padding-right: $btn-has-icon-compact-padding-x;
    .text {
      display: inline-block;
      margin:0 0 0 0;
    }
    svg.icon {
      display: inline-block;
    }
    svg.icon + .text {
      margin:0 0 0 6px;
    }
    .text + svg.icon {
      margin-left: 6px;
    }
  }

  &.has-icon.compact {
    padding-left: $btn-has-icon-compact-padding-x;
    padding-right: $btn-has-icon-compact-padding-x;
    .text {
      margin: 0 8px 0 5px;
    }
    svg.icon + .text {
        margin: 0 5px 0 8px;
    }
    .text + svg.icon {
      margin-left: 0px;
    }
  }
  &.has-icons {
    padding-left: 7px;
    padding-right: 7px;
    .text {
      display: inline-block;
      margin:0 0 0 0;
    }
    svg.icon {
      display: inline-block;
    }
    svg.icon + .text {
      margin:0 0 0 6px;
    }
    .text + svg.icon {
      margin-left: 6px;
    }
  }
}

// .dao-btn.icon-btn style
.dao-btn.icon-btn {
  padding-left: 7px;
  padding-right: 7px;
  width: 32px;
}

// .dao-btn.opt-btn style
.dao-btn.opt-btn {
  width: 46px;
  padding-left: 7px;
  padding-right: 3px;
  letter-spacing: -3px; // 去除inline-block间隙
  svg.icon + svg {
    margin-left: 2px;
  }
}

.dao-btn {
  &.btn-sm {
    font-size: 13px;
    line-height: 24px;
    padding: 0 10px;
    height: 26px;
  }
}
