.ion-button{
	--ion-green: #00E27B;
	--ion-green-2: #00A571;
    --ion-violet: #6637F2;
	--ion-dark: #121212;
	--ion-white: #FFFFFF;

    --ion-btn-pad-top: 14px;
	--ion-btn-pad-right: 22px;
	--ion-btn-pad-bottom: 14px;
	--ion-btn-pad-left: 22px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;

	border-radius: 16px;

    padding: var(--ion-btn-pad-top) var(--ion-btn-pad-right) var(--ion-btn-pad-bottom) var(--ion-btn-pad-left);
	
	text-decoration: none;
	font-family: 'Figtree', sans-serif;
	font-weight: 600;

    transition: all .2s ease;
}

.ion-button__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
    transition: all .2s ease;
}

.ion-button__icon svg{
	width: 1em;
	height: 1em;
}

/* Icon order */
.ion-button--icon-before .ion-button__icon{ order: 0; }
.ion-button--icon-before .ion-button__text{ order: 1; }
.ion-button--icon-after  .ion-button__text{ order: 0; }
.ion-button--icon-after  .ion-button__icon{ order: 1; }

/* Vertical layout */
.ion-button--vertical {
	flex-direction: column;
	align-items: center;
	gap: 5px;

	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
}

.ion-button--vertical .ion-button__icon{
	font-size: 1.25em;
}

.ion-button:hover > .ion-button__icon {
    margin-left: 3px;
}

.ion-button--vertical:hover > .ion-button__icon {
    margin-left: 0;
    transform: translateY(3px);
}

/* Light */
.ion-button.ion-button--theme-light{
	color: var(--ion-white);
}

/* Dark */
.ion-button.ion-button--theme-dark{
	color: var(--ion-dark);
}


/* Light Hover */
.ion-button.ion-button--theme-light:hover,
.ion-button.ion-button--theme-light:hover > span {
	color: var(--ion-white);
}

/* Dark Hover */
.ion-button.ion-button--theme-dark:hover, 
.ion-button.ion-button--theme-dark:hover > span {
	color: var(--ion-dark);
}


/* =========================
   PRIMARY
========================= */
.ion-button--primary{
  position: relative;
  overflow: hidden;
  background: transparent;
}

.ion-button--primary::before,
.ion-button--primary::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity 250ms ease;
}

.ion-button--primary::before{
  background: linear-gradient(90deg, var(--ion-green) 0%, var(--ion-green) 100%);
  opacity: 1;
}

.ion-button--primary::after{
  background: linear-gradient(90deg, var(--ion-green) 0%, var(--ion-green-2) 100%);
  opacity: 0;
}

.ion-button--primary:hover::after{
  opacity: 1;
}

.ion-button--primary > *{
  position: relative;
  z-index: 1;
}


/* =========================
   SECONDARY
========================= */
.ion-button--secondary{
	background: transparent;
    border: 2px solid var(--ion-green);

padding:
		calc(var(--ion-btn-pad-top) - 2px)
		calc(var(--ion-btn-pad-right) - 2px)
		calc(var(--ion-btn-pad-bottom) - 2px)
		calc(var(--ion-btn-pad-left) - 2px);
}
.ion-button--secondary:hover{
	background: rgba(0, 226, 138, 0.10);
}

/* =========================
   TERTIARY
========================= */
.ion-button--tertiary{
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

.ion-button--tertiary > .ion-button__icon {
	color: var(--ion-green) !important;
}

.ion-button--tertiary:hover > .ion-button__icon {
	color: var(--ion-green) !important;
}

/* =========================
   VERTICAL
========================= */
.ion-button--vertical:hover > .ion-button__icon {
	color: var(--ion-green) !important;
}