/* Variables */
$btnText: #101828;
$yellow500: #ffce2d;
$yellow300: #fbd456;
$orange500: #f99d28;
$orange300: #faae4e;
$green500: #71bf44;
$green300: #88cb62;
$blue500: #55a8d9;
$blue300: #63b7e9;

/* System Custom Buttons */
.vce-button--style-basic-container {
  .vce {
    .vce-button {
      height: 60px;
      border-radius: 4px;
      letter-spacing: 0.03em !important;
      padding: 0 26px !important;
      text-transform: uppercase !important;
      color: $btnText !important;
    }
  }
  &.btn-basic {
    .vce {
      .vce-button {
        height: 40px;
      }
    }
  }
  &.btn-orange {
    .vce {
      .vce-button {
        background: $orange500 !important;
        &:hover {
          background: $orange300 !important;
        }
      }
    }
  }
  &.btn-green {
    .vce {
      .vce-button {
        background: $green500 !important;
        &:hover {
          background: $green300 !important;
        }
      }
    }
  }
  &.btn-blue {
    .vce {
      .vce-button {
        background: $blue500 !important;
        &:hover {
          background: $blue300 !important;
        }
      }
    }
  }
  &.btn-yellow {
    .vce {
      .vce-button {
        background: $yellow500 !important;
        &:hover {
          background: $yellow300 !important;
        }
      }
    }
  }
  &.btn-with-arrow {
    .vce {
      .vce-button {
        min-width: 270px;
        display: flex;
        align-items: center;
        &:after {
          font-family: "Font Awesome 5 Free";
          content: "\f35a";
          font-weight: 400 !important;
          margin-inline-start: auto;
        }
      }
    }
  }
  &.btn-with-icon {
    .vce {
      .vce-button {
        display: flex;
        align-items: center;
        gap: 15px;
        &:before {
          display: block;
          content: "";
          min-width: 40px;
          height: 40px;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
    }
    &.btn-donate {
      .vce {
        .vce-button::before {
          background-image: url(../images/btn-icon-donate.png) !important;
        }
      }
    }
    &.btn-providers {
      .vce {
        .vce-button::before {
          background-image: url(../images/btn-icon-providers.png) !important;
        }
      }
    }
    &.btn-parents {
      .vce {
        .vce-button::before {
          background-image: url(../images/btn-icon-parents.png) !important;
        }
      }
    }
    &.btn-apply-vpk {
      .vce {
        .vce-button::before {
          background-image: url(../images/btn-icon-apply-vpk.png) !important;
        }
      }
    }
    &.btn-apply-financial {
      .vce {
        .vce-button::before {
          background-image: url(../images/btn-icon-apply-financial.png) !important;
        }
      }
    }
    &.btn-icon-pro {
      .vce {
        .vce-button::before {
          background-image: url(../images/btn-icon-pro-dev.png) !important;
        }
      }
    }
  }
}