.sm {
  --font-size-button: 14px;
  --line-height-button: 22px;
  --padding-button: 2px 12px;
  --border-radius-button: 8px;
}

.md {
  --font-size-button: 16px;
  --line-height-button: 24px;
  --padding-button: 8px 16px;
  --border-radius-button: 12px;
}

.xl {
  --font-size-button: 16px;
  --line-height-button: 24px;
  --padding-button: 12px 16px;
  --border-radius-button: 12px;
}

.btn-custom {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  height: fit-content;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  text-decoration: none;
  padding: var(--padding-button);
  border-radius: var(--border-radius-button);
  border: solid 1px transparent;
  transition: all 150ms ease-in-out;
}

.primary-btn-custom {
  color: #fff !important;
  background-color: var(--e-global-color-7b0e4db);
}

.primary-btn-custom:hover {
  background-color: var(--e-global-color-2c8b920);
}

.primary-btn-custom:active {
  background-color: var(--e-global-color-7b0e4db);
}

.secondary-btn-custom {
  color: var(--e-global-color-20e70d8) !important;
  background-color: var(--e-global-color-d1059e8);
}

.secondary-btn-custom:hover {
  background-color: var(--e-global-color-3d1e395);
}

.secondary-btn-custom:active {
  background-color: var(--e-global-color-8fc5254);
}

.tertiary-btn-custom {
  color: var(--e-global-color-7ebda37) !important;
  background-color: transparent;
}

.tertiary-btn-custom:hover {
  color: var(--e-global-color-84ff830) !important;
  background-color: #f6fdfe12;
}

.tertiary-btn-custom:active {
  background-color: #f6fdfe22;
}

.primary-btn-custom.light {
  color: #fff !important;
  background-color: var(--e-global-color-20e70d8);
}

.primary-btn-custom.light:hover {
  background-color: var(--e-global-color-7b0e4db);
}

.primary-btn-custom.light:active {
  background-color: var(--e-global-color-7e763ff);
}

.secondary-btn-custom.light {
  color: var(--e-global-color-20e70d8) !important;
  background-color: #fff;
  border-color: var(--e-global-color-20e70d8);
}

.secondary-btn-custom.light:hover {
  background-color: var(--e-global-color-3d1e395);
  border-color: var(--e-global-color-7b0e4db);
}

.secondary-btn-custom.light:active {
  background-color: var(--e-global-color-8fc5254);
  border-color: var(--e-global-color-7e763ff);
}

.tertiary-btn-custom.light {
  color: var(--e-global-color-20e70d8) !important;
  background-color: transparent;
}

.tertiary-btn-custom.light:hover {
  color: var(--e-global-color-7b0e4db) !important;
  background-color: #0F303D0D;
}

.tertiary-btn-custom.light:active {
  color: var(--e-global-color-7e763ff) !important;
  background-color: #0F303D1A;
}