$primary: #a6192e;
$gold: #94795d;
$secondary: #333333;

.el-btn-plain-outline {
  color: #25283d;
  border-color: #25283d;
}

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

.el-button-secondary {
  background-color: $secondary !important;
  border: 1px solid $secondary !important;
  color: white !important;
}

.el-button-secondary-outline {
  color: $secondary !important;
  background-color: white !important;
  border: 1px solid $secondary !important;
}

.el-button-white {
  color: $secondary !important;
  background-color: white !important;
}

.el-button-secondary-outline.is-disabled {
  color: #d5d4d4 !important;
  background-color: white !important;
  border: 1px solid #d5d4d4 !important;
}

.el-btn-primary-outline {
  color: $primary;
  border-color: $primary;
  background-color: white;

  &.is-disabled {
    color: #d38c97 !important;
    border-color: #d38c97 !important;
    background-color: white !important;
  }
}

.el-btn-info-outline {
  color: $info;
  border-color: $info;
  background-color: white;

  &.is-disabled {
    color: #d38c97 !important;
    border-color: #d38c97 !important;
    background-color: white !important;
  }
}

.left-card-header {
  float: left;
}

.right-card-header {
  float: right;
  &.el-button--text {
    padding: 3px 0;
  }

  @media only screen and (max-width: 1024px) {
    &.mobile-no-float {
      float: unset !important;

      .d-flex {
        margin-top: 10px;
      }
    }
  }
}

.el-button {
  border-radius: 5px !important;
}

.el-button--gold {
  background-color: $gold;
  border-color: $gold;
  color: white;

  &:hover,
  &:active,
  &:focus {
    color: $gold;
    border: 1px solid $gold;
    background-color: white;

    svg {
      filter: invert(48%) sepia(48%) saturate(266%) hue-rotate(350deg)
        brightness(93%) contrast(88%);
    }
  }
}

.el-button--gold-outline {
  color: $gold;
  border: 1px solid $gold;
  background-color: white;

  &:hover,
  &:active,
  &:focus {
    color: white;
    border: 1px solid $gold;
    background-color: $gold;

    svg {
      filter: brightness(0) invert(1);
    }
  }
}

.el-button.ecom {
  height: 40px;

  @media only screen and (max-width: 768px) {
    padding: 10px 8px;
  }

  @media (min-width: 992px) {
    height: 48px;
  }

  @media (min-width: 1200px) {
    height: 56px;
  }
}

.el-input__inner:focus ~ .el-input-group__append {
  border-color: $primary !important;
}