@import './style/mixins.scss';

.py__button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #bfcbd9;
  color: $color-base;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 5px;
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 14px;
}

.py__button.is-round {
  border-radius: 20px;
}

.py__button--size-medium {
  padding: 10px 15px;
  font-size: 13px;
  border-radius: 4px;
}

.py__button--size-small {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 3px;
}

.py__button--default {
  @include button-type($color-default);

  &:hover,
  &:focus {
    @include focus-hover($color-primary);
    background-color:$color-primary;
  }

  &:active {
    @include active($color-primary);
  }

  &:disabled {
    @include disabled;
    @include diabled-color($color-default);
  }
}

.py__button--default.is-plain {
  @include button-type-plain($color-default);
  color: lighten($color-default,40%);

  &:hover,
  &:focus {
    @include focus-hover-plain($color-primary);
  }

  &:active {
    @include active($color-primary);
  }

  &:disabled {
    @include disabled;
    @include diabled-color-plain($color-default);
  }
}

.py__button--primary {
  @include button-type($color-primary);

  &:focus,
  &:hover {
    @include focus-hover($color-primary);
  }

  &:disabled {
    @include disabled;
    @include diabled-color($color-primary);
  }
}

.py__button--primary.is-plain {
  @include button-type-plain($color-primary);

  &:focus,
  &:hover {
    @include focus-hover-plain($color-primary);
  }

  &:disabled {
    @include disabled;
    @include diabled-color-plain($color-primary);
  }
}

.py__button--success {
  @include button-type($color-success);

  &:focus,
  &:hover {
    @include focus-hover($color-success);
    ;
  }

  &:disabled {
    @include disabled;
    @include diabled-color($color-success);
  }
}

.py__button--success.is-plain {
  @include button-type-plain($color-success);

  &:focus,
  &:hover {
    @include focus-hover-plain($color-success);
  }

  &:disabled {
    @include disabled;
    @include diabled-color-plain($color-success);
  }
}

.py__button--info {
  @include button-type($color-info);

  &:focus,
  &:hover {
    @include focus-hover($color-info);
    ;
  }

  &:disabled {
    @include disabled;
    @include diabled-color($color-info);
  }
}

.py__button--info.is-plain {
  @include button-type-plain($color-info);

  &:focus,
  &:hover {
    @include focus-hover-plain($color-info);
  }

  &:disabled {
    @include disabled;
    @include diabled-color-plain($color-info);
  }
}

.py__button--warning {
  @include button-type($color-warning);

  &:focus,
  &:hover {
    @include focus-hover($color-warning);
    ;
  }

  &:disabled {
    @include disabled;
    @include diabled-color($color-warning);
  }
}

.py__button--warning.is-plain {
  @include button-type-plain($color-warning);

  &:focus,
  &:hover {
    @include focus-hover-plain($color-warning);
  }

  &:disabled {
    @include disabled;
    @include diabled-color-plain($color-warning);
  }
}

.py__button--danger {
  @include button-type($color-danger);

  &:focus,
  &:hover {
    @include focus-hover($color-danger);
    ;
  }

  &:disabled {
    @include disabled;
    @include diabled-color($color-danger);
  }
}

.py__button--danger.is-plain {
  @include button-type-plain($color-danger);

  &:focus,
  &:hover {
    @include focus-hover-plain($color-danger);
  }

  &:disabled {
    @include disabled;
    @include diabled-color-plain($color-danger);
  }
}


.py__button--text {
  color: #409EFF;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;

  &:focus,
  &:hover {
    color: #66b1ff;
    border-color: transparent;
    background-color: transparent;
  }

  &:disabled {
    @include disabled;
    @include diabled-color($color-danger);
    color: $color-danger
  }

  &:active {
    color: #3a8ee6;
    background-color: transparent
  }
}

.py__button--text,
.py__button--text.is-disabled,
.py__button--text.is-disabled:focus,
.py__button--text.is-disabled:hover,
.py__button--text:active {
  border-color: transparent
}

.py__button.is-disabled.py__button--text {
  background-color: transparent
}