.custom-button{
    display: inline-flex;
	box-sizing:border-box;
	height: 64px;
    padding: 17px 24px;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-radius: var(--Radii-Full, 1000px);
}
@media(max-width:768px){
	.custom-button{
		display: inline-flex;
		height: 44px;
		padding: 0px 18px;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
}
.custom-button.primary{
    background: var(--Color-Buttons-Primary-Idle, #03231B);
    color: var(--Color-Content-Inverse, #F2F2F2);
}
.custom-button.primary svg path{
	stroke:var(--Color-Content-Inverse, #F2F2F2);
}

.custom-button.primary:hover{
    background: var(--Color-Buttons-Primary-Hover, #06322B);
}
.custom-button.primary:active{
   background: var(--Color-Buttons-Primary-Pressed, #03231B);
}

.custom-button.primary.disabled{
    background: var(--Color-Buttons-Secondary-Disabled, #F2F2F2);
    color: var(--Color-Content-Buttons-Primary-Disabled, #A1A1A1);
}
.custom-button.primary.disabled svg path{
	stroke:var(--Color-Content-Buttons-Primary-Disabled, #A1A1A1);
}

.custom-button.secondary{
    background: var(--Color-Buttons-Secondary-Idle, #F4F4F4);
    color: var(--Color-Buttons-Background-Secondary-Idle, #0D0D0D);
}
.custom-button.secondary svg path {
    stroke: var(--Color-Buttons-Background-Secondary-Idle, #0D0D0D);
}
.custom-button.secondary:hover{
    background: var(--Color-Buttons-Secondary-Hover, #F2F2F2);
}
.custom-button.secondary:active{
    background: var(--Color-Buttons-Secondary-Pressed, #D6D6D6);
}
.custom-button.secondary.disabled{
    background: var(--Color-Buttons-Secondary-Disabled, #F2F2F2);
    color: var(--Color-Buttons-Background-Secondary-Disabled, #BDBDBD);
}
.custom-button.secondary.disabled svg path {
    stroke: var(--Color-Buttons-Background-Secondary-Disabled, #BDBDBD);
}
.custom-button.outline{
	border-width:2px;
}
@media(max-width:48rem){
    .custom-button.outline{
        border-width:1.2px;
    }	
}
.custom-button.outline{
    border-style: solid;
    border-color: var(--Color-Buttons-Outline-Idle, #03231B);
    color: var(--Color-Buttons-Outline-Idle, #03231B);
    width:fit-content;
}
.custom-button.outline svg path {
    stroke: var(--Color-Buttons-Outline-Idle, #03231B);
}
.custom-button.outline:hover{
    border-color: var(--Color-Buttons-Outline-Hover, #0C5A4D);
    color: var(--Color-Buttons-Outline-Hover, #0C5A4D);
}
.custom-button.outline:hover svg path {
    stroke: var(--Color-Buttons-Outline-Hover, #0C5A4D);
}
.custom-button.outline:active{
    border-color: var(--Color-Buttons-Outline-Pressed, #06322B);    
    color: var(--Color-Buttons-Outline-Pressed, #06322B);
}
.custom-button.outline:active svg path {
    stroke: var(--Color-Buttons-Outline-Pressed, #06322B);
}
.custom-button.outline.disabled{
    border-color: var(--Color-Buttons-Outline-Disabled, #D6D6D6);    
    color: var(--Color-Buttons-Outline-Disabled, #D6D6D6);
}
.custom-button.outline.disabled svg path {
    stroke: var(--Color-Buttons-Outline-Disabled, #D6D6D6);
}

.custom-button.branded{
    background: var(--Color-Background-Brand-1, #EA5A14);
    color: var(--Color-Content-Inverse, #F2F2F2);
}
.custom-button.branded svg path {
    stroke: var(--Color-Content-Inverse, #F2F2F2);
}
.custom-button.branded:hover{
    background: #BC4910;
}
.custom-button.branded:active{
    background: var(--Color-Background-Brand-1, #EA5A14);
}
.custom-button.branded.disabled{
    background: var(--Color-Buttons-Secondary-Disabled, #F2F2F2);
    color: var(--Color-Content-Buttons-Primary-Disabled, #A1A1A1);
}
.custom-button.branded.disabled svg path {
    stroke: var(--Color-Content-Buttons-Primary-Disabled, #A1A1A1);
}

.custom-button-wrapper.text-outside{
    color: var(--Text-primary, #26251A);
    display: flex;
    align-items: center;
	gap: 12px;
}

.custom-button .custom-button-icon,
.custom-button svg{
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
	flex-shrink:0;
}
@media(max-width:768px){
	.custom-button .custom-button-icon,
	.custom-button svg{
		width: 16px;
		height: 16px;
	}
}
.custom-button .custom-button-icon img,
.custom-button .custom-button-icon i{
    width:100%;
    height:100%;
    object-fit:contain;
}

.custom-button.round{
    display: flex;
    width: 64px;
    height: 64px;
    padding: 17px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
	box-sizing:border-box;
}
@media(max-width:768px){
	.custom-button.round{
		width: 44px;
		height: 44px;
		padding: 0px 14px;
	}
}

.custom-button.plain-button{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 8px;
    align-self: stretch;
}
.custom-button.plain-button .custom-button-text{
    color: var(--Color-Content-Secondary, #363636);
}
.custom-button.plain-button .custom-button-text.branded{
    color: var(--Color-Content-Brand-1-Text, #BC4910);
}