/* Buttons - base */
 .btn {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	padding: 0 16px;
 	height: 40px;
 	border-radius: 9999px;
 	font-size: var(--c-b2bFontBaseSize);
 	font-weight: var(--c-b2bFontWeight500);
 	border: none;
 	cursor: pointer;
 	position: relative;
 	transition: background 0.2s;
 	text-transform: uppercase;
 }

 .btn:disabled {
 	pointer-events: none;
 }

 .btn:focus {
 	outline: none;
 }

 /* Buttons - width */
 .btn-width-fixed {
 	width: 71px;
 }

 @media (min-width: 768px) {
 	.btn-width-fixed {
 		width: 120px;
 	}
 }

 .btn-width-full {
 	width: 100%;
 	padding: 0;
 }

 /* Buttons - height */
 .btn-short {
 	height: 32px;
 }

 @media (min-width: 768px) {
 	.btn-short {
 		height: 40px;
 	}
 }

 /* Buttons - Brand */
 .btn-brand {
 	background-color: var(--c-b2b-blue);
 	color: var(--c-b2bWhite);
 }

 .btn-brand:hover,
 .btn-brand:focus,
 .btn-brand:active {
 	background-color: var(--c-b2b-mya);
 }

 .btn-brand:focus {
 	box-shadow: var(--c-b2bBoxShadowFocus);
 }

 .btn-brand:disabled {
 	background-color: var(--c-b2bKawaiiGrey) !important;
 	color: var(--c-b2bTrueGrey) !important;
 }

 .btn-brand:disabled svg,
 .btn-brand:disabled svg path {
 	fill: var(--c-b2bTrueGrey) !important;
 }

 /* Buttons - Transparent */
 .btn-transparent {
 	background-color: transparent;
 	border: 1px solid var(--c-b2bAlmostWhite);
 	color: var(--c-b2bWhite);
 }

 .btn-transparent:hover,
 .btn-transparent:focus,
 .btn-transparent:active {
 	background-color: var(--c-b2bAlmostWhite);
 	border: 1px solid var(--c-b2bDarkGrey);
 	color: var(--c-englishBlue);
 }

 .btn-transparent:hover svg,
 .btn-transparent:focus svg,
 .btn-transparent:active svg,
 .btn-transparent:hover svg path,
 .btn-transparent:focus svg path,
 .btn-transparent:active svg path {
 	fill: var(--c-englishBlue) !important;
 }

 .btn-transparent-desctructive svg,
 .btn-transparent-desctructive svg path {
 	fill: var(--c-b2b-red) !important;
 }

 .btn-transparent:focus {
 	box-shadow: var(--c-b2bBoxShadowFocusInverse);
 }

 .btn-transparent:disabled {
 	opacity: 0.5;
 }

 /* Buttons - White */
 .btn-white {
 	background-color: var(--c-b2bWhite);
 	border: 1px solid var(--c-b2bDarkGrey);
 	color: var(--c-englishBlue);
 }

 .btn-white:hover {
 	background-color: var(--c-b2bAlmostWhite);
 }

 .btn-white:focus {
 	box-shadow: var(--c-b2bBoxShadowFocus);
 }

 .btn-white:disabled {
 	opacity: 0.5;
 }

 /* Button Icons - base */
 .btn-icon {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 40px;
 	height: 40px;
 	border-radius: 50%;
 	cursor: pointer;
 	transition: background 0.2s;
 }

 .btn-icon:before {
 	content: '';
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center;
 }

 .btn-icon:focus {
 	outline: none;
 }

 .btn-icon:disabled {
 	pointer-events: none;
 }

 /* Button Icons - size */
 .btn-icon-small {
 	width: 32px;
 	height: 32px;
 }

 @media (min-width: 768px) {
 	.btn-icon-small {
 		width: 40px;
 		height: 40px;
 	}
 }

 .btn-icon-big{
	width: 40px;
 	height: 40px;
 }

 /* Button Icons - Outline */
 .btn-icon-outline {
 	background-color: var(--c-b2bWhite);
 	border: 1px solid var(--c-b2bDarkGrey);
 }

 .btn-icon-outline:hover,
 .btn-icon-outline:focus,
 .btn-icon-outline:active {
 	background-color: var(--c-b2bAlmostWhite);
 }

 .btn-icon-outline:focus {
 	box-shadow: var(--c-b2bBoxShadowFocus);
 }

 .btn-icon-outline:disabled {
 	opacity: 0.3;
 }

 .btn-icon-outline:disabled::before {
 	filter: grayscale(100%);
 }

 /* Button Icons - Outline - Red */
 .btn-icon-outline.btn-icon-outline-red,
 .btn-icon-outline.btn-icon-outline-red:hover,
 .btn-icon-outline.btn-icon-outline-red:focus,
 .btn-icon-outline.btn-icon-outline-red:active {
 	background-color: var(--c-b2b-pink);
 	border: 1px solid var(--c-b2b-red);
 }

 /* Button Icons - Transparent */
 .btn-icon-transparent {
 	background-color: transparent;
 	border: 1px solid var(--c-b2bAlmostWhite);
 }

 .btn-icon-transparent:hover:before {
 	opacity: 0.75;
 }

 .btn-icon-transparent:focus {
 	box-shadow: var(--c-b2bBoxShadowFocusInverse);
 }

 .btn-icon-transparent:focus:before {
 	opacity: 0.75;
 }

 .btn-icon-transparent:active:before {
 	opacity: 0.50;
 }

 .btn-icon-transparent:disabled,
 .btn-icon-transparent:disabled::before {
 	opacity: 0.25;
 }

 /* Button - Tertiary */
 .btn-tertiary,
 .btn-tertiary-destructive {
 	background-color: transparent;
 	text-transform: none !important;
 }

 .btn-tertiary {
 	color: var(--c-b2b-blue);
 }

 .btn-tertiary-destructive {
 	color: var(--c-b2b-red) !important;
 	padding: 0px !important;
 }

 .btn-icon-tertiary {
 	margin-right: 8px;
 	fill: var(--c-b2b-red) !important;
 }

 .btn-icon-tertiary path {
 	fill: var(--c-b2b-red) !important;
 }

 .btn-tertiary-destructive:disabled .btn-icon-tertiary,
 .btn-tertiary-destructive:disabled .btn-icon-tertiary path {
 	fill: var(--c-b2bKawaiiGrey) !important;
 }

 .btn-tertiary:hover,
 .btn-tertiary:active,
 .btn-tertiary:focus,
 .btn-tertiary-destructive:hover,
 .btn-tertiary-destructive:active,
 .btn-tertiary-destructive:focus {
 	background-color: var(--c-b2b-cool-white) !important;
 }

 .btn-tertiary:focus,
 .btn-tertiary-destructive:focus {
 	box-shadow: var(--c-b2bBoxShadowButtonActive);
 	background-color: var(--c-b2bWhite) !important;
 }

 .btn-tertiary:disabled,
 .btn-tertiary-destructive:disabled {
 	background-color: transparent;
 	color: var(--c-b2bKawaiiGrey) !important;
 }

 /* Destructive outline button */
 .btn-transparent-desctructive {
 	background-color: var(--c-b2b-pink) !important;
 	border: 1px solid var(--c-b2b-red) !important;
 	color: var(--c-b2b-red) !important;
 }

 .btn-transparent-desctructive:focus {
 	box-shadow: var(--c-b2bBoxShadowFocus);
 }

 .btn-transparent-desctructive:hover {
 	background-color: var(--c-b2b-light-red) !important;
 }

 .btn-transparent-desctructive:active .btn-icon-transparent-desctructive,
 .btn-transparent-desctructive:active .btn-icon-transparent-desctructive path {
 	fill: var(--c-b2b-red) !important;
 }

 .btn-transparent-desctructive:hover .btn-icon-transparent-desctructive,
 .btn-transparent-desctructive:hover .btn-icon-transparent-desctructive path {
 	fill: var(--c-b2b-red) !important;
 }

 .btn-transparent-desctructive:focus {
 	box-shadow: var(--c-b2bBoxShadowFocus);
 }

 .btn-transparent-desctructive:disabled {
 	background-color: var(--c-b2bKawaiiGrey) !important;
 	color: var(--c-b2bTrueGrey) !important;
 	border: none !important;
 }

 .btn-icon-transparent-desctructive {
 	fill: var(--c-b2b-red) !important;
 	margin-right: 8px;
 }

 .btn-transparent-desctructive:disabled .btn-icon-transparent-desctructive {
 	fill: var(--c-b2bTrueGrey) !important;
 }

 .btn-transparent-desctructive:disabled .btn-icon-transparent-desctructive,
 .btn-transparent-desctructive:disabled .btn-icon-transparent-desctructive path{
 	fill: var(--c-b2bTrueGrey) !important;
 }

 .btn-tertiary-destructive:disabled .btn-icon-tertiary,
 .btn-tertiary-destructive:disabled .btn-icon-tertiary path {
 	fill: var(--c-b2bKawaiiGrey) !important;
 }


 /* Button - Tertiary - uppercase */
 .btn-tertiary-uppercase {
 	padding-left: 0px !important;
 	padding-right: 0px !important;
 	text-transform: uppercase !important;
 }

 /* Button base */
 .btn-base {
 	height: 40px;
 	padding-top: 1px !important;
 	padding-bottom: 1px !important;
 	padding-left: 0px !important;
 	padding-right: 0px !important;
 	font-weight: var(--c-b2bFontWeight500);
 	font-size: var(--c-b2bFontBaseSize);
 	line-height: var(--c-b2bDefaultLineHeight);
 	letter-spacing: var(--c-b2bDefaultLetterSpacing);
 	color: var(--c-b2b-blue);
 	border-radius: 9999px;
 	background-color: transparent !important;
 }

 .btn-base:hover {
 	background-color: var(--c-b2b-cool-white) !important;
 }

 .btn-base:active {
 	background-color: var(--c-b2bWhite) !important;
 	box-shadow: var(--c-b2bBoxShadowButtonActive);
 }

 .btn-base:focus {
 	background-color: var(--c-b2b-cool-white) !important;
 	box-shadow: var(--c-b2bBoxShadowFocus);
 }

 .btn-base:disabled {
 	background-color: var(--c-b2bWhite) !important;
 	color: var(--c-b2bKawaiiGrey);
 }