@import './variables.scss';
@mixin colorBtn($color) {
  background: $color;
  &:hover {
    color: $color;
    &:before,
    &:after {
      background: $color;
    }
  }
}

.el-button--small{
  height: 32px;
}

.el-button--primary.is-plain.samples-btn-icon {
  padding: 8px 15px;
}

.el-button--primary.is-plain.samples-btn-icon-right {
  padding: 8px 10px 8px 15px;
  .el-icon--right {
    margin-left: 10px;
  }
}

.el-button--primary {
  background: $yellow !important;
  border-color: $yellow !important;
}

.el-button--primary:hover {
  background: $yellowHover !important;
  border-color: $yellowHover !important;
}

.el-button--primary:hover {
  background: $yellowHover !important;
  border-color: $yellowHover !important;
}

.el-button--primary:active {
  background: $yellowActive !important;
  border-color: $yellowActive !important;
}

.el-button--success:hover {
  background: $greenHover !important;
  border-color: $greenHover !important;
}

.el-button--success:active {
  background: $greenActive !important;
  border-color: $greenActive !important;
}

.el-button--primary.is-plain {
  background: #fff !important;
  color: $blue !important;
}

.el-button--primary.is-plain:visited,
.el-button--primary.is-plain:focus {
  color: $yellow !important;
}

.el-button--primary.is-plain:hover {
  background: $yellow !important;
  color: #fff !important;
}

.el-button--primary.is-plain:active {
  background: $yellowActive !important;
  color: #fff !important;
}

.el-button--text:hover,
.el-button--text:focus {
  color: $blue;
  font-weight: bold;
}

.el-button--text.samples-text-button-disabled {
  color: $red;
  &:hover,
  &:active,
  &:focus,
  &:visited {
    color: $redActive;
    font-weight: bold;
  }
}

.samples-ismore-button{
  color: $blue !important;
}

.el-button--text.samples-text-button-primary {
  color: $--color-blue !important;
  &:hover,
  &:active,
  &:focus,
  &:visited {
    color: $--color-blue-hover !important;
    font-weight: bold;
  }
}

.el-button--text.samples-text-button-new {
  color: $green;
  &:hover,
  &:active,
  &:focus,
  &:visited {
    color: $green;
    font-weight: bold;
  }
}

.el-button--text.is-disabled,
.el-button--text.is-disabled:hover,
.el-button--text.is-disabled:focus {
  color: #dbdbdb;
}

.el-button--small.is-disabled,
.el-button--small.is-disabled:hover,
.el-button--small.is-disabled:focus,
.el-button--small.is-disabled:active,
.el-button--success.is-disabled,
.el-button--success.is-disabled:hover,
.el-button--success.is-disabled:focus,
.el-button--success.is-disabled:active {
  background-color: #dbdbdb !important;
  border-color: #dbdbdb !important;
}

.el-button--primary.is-plain.is-disabled,
.el-button--primary.is-plain.is-disabled:hover,
.el-button--primary.is-plain.is-disabled:focus,
.el-button--primary.is-plain.is-disabled:active {
  background-color: #fff !important;
  color: #dbdbdb !important;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #606266 !important;
  font-weight: bold !important;
}

.el-button+.el-button {
  margin-left: 20px !important;
}

.button-delete {
  background-color: #fff !important;
  border: 1px solid $red !important;
  color: $red !important;
}

.button-delete:hover {
  background-color: $red !important;
  border: 1px solid $red !important;
  color: #fff !important;
}

.button-delete:active {
  background-color: $redActive !important;
  border: 1px solid $redActive !important;
  color: #fff !important;
}

.button-delete:disabled {
  background-color: #fff !important;
  border: 1px solid #dbdbdb !important;
  color: #dbdbdb !important;
}

.button-delete:focus {
  background-color: $redActive !important;
  border: 1px solid $redActive !important;
  color: #fff !important;
}

.el-icon-search:before {
  content: "\e711" !important;
  font-family: "font_family" !important;
  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}