// Mixin for generating new styles
@mixin btn-styles($btn-color, $btn-states-color, $btn-font-color, $btn-border-color) {
  border-color: var($btn-border-color);
  color: var(--font-fill-color);
  background-color: var($btn-color);
  color: var($btn-font-color);
  box-shadow: var(--button-box-shadow);

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-color: var($btn-states-color);
    color: var(--font-fill-color);
    border-color: var($btn-color);
    .caret {
      border-top-color: var(--font-fill-color);
    }
  }

  // &.disabled,
  // &:disabled,
  // &[disabled],
  // fieldset[disabled] & {
  //   &,
  //   &:hover,
  //   &:focus,
  //   &.focus,
  //   &:active,
  //   &.active {
  //     background-color: var(--transparent-bg);
  //     border-color: var($btn-color);
  //   }
  // }
  &.btn-cta{
    color: var(--white-color);
    background-color: var($btn-color);
    &:hover{
      background-color: var($btn-states-color);
      border-color: var($btn-states-color);
    }
  }
  &.btn-transparent {
    // border-color: transparent !important;
    &:not(:hover) {
      background-color: transparent !important;
    }
    box-shadow: unset;
  }
  // &.btn-fill {
  //   color: var(--white-color);
  //   background-color: var($btn-color);
  //   @include opacity(1);

  //   &:hover,
  //   &:focus,
  //   &:active,
  //   &.active,
  //   .open > &.dropdown-toggle {
  //     background-color: var($btn-states-color);
  //     color: var(--white-color);
  //     border-color: var($btn-states-color);
  //   }

  //   .caret {
  //     border-top-color: var(--white-color);
  //   }
  // }

  // &.btn-simple {
    // &:hover,
    // &:focus,
    // &:active,
    // &.active,
    // .open > &.dropdown-toggle {
    //   background-color: var(--transparent-bg);
    //   color: var($btn-states-color);

    //   .caret {
    //     border-top-color: var($btn-states-color);
    //   }
    // }
  // }

  .caret {
    border-top-color: var($btn-font-color);
  }
}

@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border, $line-height) {
  font-size: $font-size;
  // border-radius: $border;
  padding: $padding-vertical $padding-horizontal;

  &.btn-simple {
    padding: $padding-vertical + 2 $padding-horizontal;
  }

}