/* GENERAL STYLES */
comp-button {
	max-height: 40px;
	width: max-content;
	display: block;
	height: 100%;
}

comp-button[compact] {
	max-height: 32px;
	height: 100%;
}

comp-button[loading],
comp-button[loading] button {
	cursor: default;
	/* pointer-events: none; */
	transition: width 150ms ease-out;
}

comp-button button {
	border-radius: var(--border-radius-corner-md, 8px);
	column-gap: var(--spacing-space-3, 8px);
	padding: var(--spacing-space-3, 8px) var(--spacing-space-5, 16px);
	font: var(--font-body-strong);
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	height: max-content;
	background: transparent;
	border: none;
	position: relative;
	width: 100%;
	height: 100%;
}

comp-button[compact] button {
	padding: var(--spacing-space-2, 4px) var(--spacing-space-4, 12px);
}

comp-button:not([compact]):not([type~="icon"]):not([type~="toggle"])[icon-left]:not([icon-right]) button {
	padding-left: var(--spacing-space-4, 12px);
}

comp-button:not([compact]):not([type~="icon"]):not([type~="toggle"])[icon-right]:not([icon-left]) button {
	padding-right: var(--spacing-space-4, 12px);
}

comp-button[compact]:not([type~="icon"]):not([type~="toggle"])[icon-left]:not([icon-right]) button {
	padding-left: var(--spacing-space-3, 8px);
}

comp-button[compact]:not([type~="icon"]):not([type~="toggle"])[icon-right]:not([icon-left]) button {
	padding-right: var(--spacing-space-3, 8px);
}

comp-button[active] span.circle-nav {
	position: absolute;
	right: unset;
	left: unset;
	bottom: -4px;
	border-radius: 50%;
	background: var(--color-secondary-600, #FB8C04);
	width: 8px;
	height: 8px;
}

comp-button:not([aria-disabled])[compact]:not([badge=""]) comp-badge {
	top: -5px;
	right: -5px;
}

comp-button[aria-disabled]:not([compact]):not([badge=""]) comp-badge,
comp-button:not([aria-disabled]):not([compact]):not([badge=""]) comp-badge {
	top: -1px;
	right: -1px;
}

comp-button[aria-disabled][compact]:not([badge=""]) comp-badge {
	top: -5px;
	right: -5px;
}

comp-button button i {
	width: 20px;
	height: 20px;
	font-size: 20px;
	justify-content: center;
	align-items: center;
	display: flex;
}
comp-button button img {
	width: 20px !important;
	height: 20px !important;
}

/* comp-button, */
comp-button button i,
comp-button button span {
	pointer-events: none;
}
comp-button button{
	pointer-events: all;
}

comp-button[aria-disabled] button {
	cursor: not-allowed;
	border-radius: var(--border-radius-corner-md, 8px);
	color: var(--color-neutral-400, #8CA2B5);
	border: none;
	background: none;
}

comp-button[compact] button {
	padding: var(--spacing-space-2, 4px) var(--spacing-space-4, 12px);
}

comp-button:not(aria-disabled) button {
	cursor: pointer;

}

comp-button i.view-element-button,
comp-button comp-progress.view-element-button {
	visibility: hidden;
	height: 0px;
	width: 0px;
	transition: all .2s ease-out;
}

comp-button i:not(.view-element-button),
comp-button comp-progress:not(.view-element-button) {
	visibility: visible;
	height: 20px;
	width: 20px;
	transition: all .15s ease-out;
}

/* GENERAL STYLES */

/* FILLED */
comp-button:not([danger]):not([aria-disabled])[type~="filled"] button {
	background: var(--color-primary-600, #0E55B9);
	color: var(--color-neutral-0, #ffffff);
	border: none;
}

comp-button:not([danger]):not([aria-disabled]):not([loading])[type~="filled"] button:hover {
	background: var(--color-primary-700, #164FA1);
}

comp-button:not([danger]):not([aria-disabled])[type~="filled"] button:focus-visible {
	outline: 2px solid var(--color-neutral-400, #8CA2B5);
	outline-offset: 1px;
}

comp-button[pressed]:not([danger]):not([aria-disabled])[type~="filled"] button,
comp-button:not([danger]):not([aria-disabled])[type~="filled"]:not([loading]) button:active,
comp-button:not([danger]):not([aria-disabled])[type~="filled"]:not([loading]) button.active,
comp-button:not([danger]):not([aria-disabled])[type~="filled"]:not([loading]) button:active:hover {
	background: var(--color-primary-800, #163A79);
}

/* DANGER */
comp-button[danger]:not([aria-disabled])[type~="filled"] button {
	background: var(--color-danger-600, #D82525);
	color: var(--color-neutral-0, #ffffff);
	border: none;
}

comp-button[danger]:not([aria-disabled])[type~="filled"]:not([loading]) button:hover {
	background: var(--color-danger-700, #BA1B1B);
}

comp-button[danger]:not([aria-disabled])[type~="filled"] button:focus-visible {
	outline: 2px solid var(--color-neutral-400, #8CA2B5);
	outline-offset: 1px;
	background: var(--color-danger-700, #BA1B1B);
}

comp-button[pressed][danger]:not([aria-disabled])[type~="filled"] button,
comp-button[danger]:not([aria-disabled])[type~="filled"]:not([loading]) button:active,
comp-button[danger]:not([aria-disabled])[type~="filled"]:not([loading]) button.active,
comp-button[danger]:not([aria-disabled])[type~="filled"]:not([loading]) button:active:hover {
	background: var(--color-danger-800, #9C1313);
}

comp-button[aria-disabled][type~="filled"] button {
	background: var(--color-neutral-100, #F3F4F7);
}

/* FILLED */

/* TONAL */
comp-button:not([danger]):not([aria-disabled])[type~="tonal"] button {
	border: 1px solid var(--color-primary-200, #D8F0FE);
	background: var(--color-primary-100, #F0F9FF);
	color: var(--color-primary-700, #164FA1);
}

comp-button:not([danger]):not([aria-disabled])[type~="tonal"]:not([loading]) button:hover {
	border: 1px solid var(--color-primary-300, #B2DFFE);
	background: var(--color-primary-200, #D8F0FE);
}

comp-button:not([danger]):not([aria-disabled])[type~="tonal"] button:focus-visible {
	outline: 2px solid var(--color-neutral-400, #8CA2B5);
	outline-offset: 1px;
}

comp-button[pressed]:not([danger]):not([aria-disabled])[type~="tonal"] button,
comp-button:not([danger]):not([aria-disabled])[type~="tonal"]:not([loading]) button:active,
comp-button:not([danger]):not([aria-disabled])[type~="tonal"]:not([loading]) button.active,
comp-button:not([danger]):not([aria-disabled])[type~="tonal"]:not([loading]) button:active:hover {
	border: 1px solid var(--color-primary-400, #8CC9FD);
	background: var(--color-primary-300, #B2DFFE);
}

/* DANGER */
comp-button[danger]:not([aria-disabled])[type~="tonal"] button {
	border: 1px solid var(--color-danger-200, #FDD3D3);
	background: var(--color-danger-100, #FFF1F0);
	color: var(--color-danger-600, #D82525)
}

comp-button[danger]:not([aria-disabled])[type~="tonal"]:not([loading]) button:hover {
	border: 1px solid var(--color-danger-300, #FBACAC);
	background: var(--color-danger-200, #FDD3D3);
}

comp-button[danger]:not([aria-disabled])[type~="tonal"] button:focus-visible {
	outline: 2px solid var(--color-neutral-400, #8CA2B5);
	border: 1px solid var(--color-neutral-0, #FFF);
}

comp-button[pressed][danger]:not([aria-disabled])[type~="tonal"] button,
comp-button[danger]:not([aria-disabled])[type~="tonal"]:not([loading]) button:active,
comp-button[danger]:not([aria-disabled])[type~="tonal"]:not([loading]) button.active,
comp-button[danger]:not([aria-disabled])[type~="tonal"]:not([loading]) button:active:hover {
	border: 1px solid var(--color-danger-400, #F48585);
	background: var(--color-danger-300, #FBACAC);
}

comp-button[aria-disabled][type~="tonal"] button {
	border: 1px solid var(--color-neutral-200, #D5DFEC);
}

/* TONAL */

/* FLAT */
comp-button:not([danger]):not([aria-disabled])[type~="flat"] button {
	border: none;
	background: transparent;
	color: var(--color-primary-600, #0E55B9);
}

comp-button:not([danger]):not([aria-disabled])[type~="flat"]:not([loading]) button:hover {
	color: var(--color-primary-700, #164FA1);
	background: var(--color-primary-200, #D8F0FE);
}

comp-button:not([danger]):not([aria-disabled])[type~="flat"] button:focus-visible {
	outline: 2px solid var(--color-neutral-400, #8CA2B5);
	outline-offset: 1px;
	background: var(--color-primary-100, #F0F9FF);
}

comp-button[pressed]:not([danger]):not([aria-disabled])[type~="flat"] button,
comp-button:not([danger]):not([aria-disabled])[type~="flat"]:not([loading]) button:active,
comp-button:not([danger]):not([aria-disabled])[type~="flat"]:not([loading]) button.active,
comp-button:not([danger]):not([aria-disabled])[type~="flat"]:not([loading]) button:active:hover {
	color: var(--color-primary-700, #164FA1);
	background: var(--color-primary-300, #B2DFFE);
}

/* DANGER */
comp-button[danger]:not([aria-disabled])[type~="flat"] button {
	border: none;
	background: transparent;
	color: var(--color-danger-600, #D82525);
}

comp-button[danger]:not([aria-disabled])[type~="flat"]:not([loading]) button:hover {
	color: var(--color-danger-600, #D82525);
	background: var(--color-danger-100, #FFF1F0);
}

comp-button[danger]:not([aria-disabled])[type~="flat"] button:focus-visible {
	outline: 2px solid var(--color-neutral-400, #8CA2B5);
	outline-offset: 1px;
	background: var(--color-danger-100, #FFF1F0);
}

comp-button[pressed][danger]:not([aria-disabled])[type~="flat"] button,
comp-button[danger]:not([aria-disabled])[type~="flat"]:not([loading]) button:active,
comp-button[danger]:not([aria-disabled])[type~="flat"]:not([loading]) button.active,
comp-button[danger]:not([aria-disabled])[type~="flat"]:not([loading]) button:active:hover {
	color: var(--color-danger-700, #BA1B1B);
	background: var(--color-danger-200, #FDD3D3);
}

/* FLAT */

/* LINK */
comp-button[type~="link"],
comp-button[type~="link"] button {
	max-height: 24px;
	font: var(--font-body-strong);
}

comp-button[type~="link"][compact],
comp-button[type~="link"][compact] button {
	max-height: 20px;
	font: var(--font-caption-medium-strong);
}

comp-button[type~="link"][compact] button i {
	font-size: 16px;
}

a:visited comp-button[type~="link"]:not([aria-disabled]) button,
a:visited comp-button[type~="link"]:not([aria-disabled]) button span,
a:visited comp-button[type~="link"]:not([aria-disabled]) button i,
comp-button[type~="link"]:not([aria-disabled])[visited] button span,
comp-button[type~="link"]:not([aria-disabled])[visited] button i,
comp-button[type~="link"]:not([aria-disabled])[visited] button {
	color: var(--color-complementary-a-700, #3F18CF);
}

comp-button:not([danger]):not([aria-disabled])[type~="link"] button {
	border: none;
	background: transparent;
	color: var(--color-neutral-600, #425567);
	border-radius: var(--border-radius-corner-s, 4px);
	padding: var(--spacing-space-0, 0px);
	height: unset;
}
comp-button:not([danger])[type~="link"] button {
	padding: var(--spacing-space-0, 0px) !important;

}
comp-button:not([danger]):not([aria-disabled])[type~="link"]:not([loading]) button:hover {
	color: var(--color-primary-600, #0E55B9);
}

comp-button:not([danger]):not([aria-disabled])[type~="link"] button:focus-visible {
	outline: 2px solid var(--color-neutral-400, #8CA2B5);
	color: var(--color-primary-600, #0E55B9);
}

comp-button[pressed]:not([danger]):not([aria-disabled])[type~="link"] button,
comp-button:not([danger]):not([aria-disabled])[type~="link"]:not([loading]) button:active,
comp-button:not([danger]):not([aria-disabled])[type~="link"]:not([loading]) button.active,
comp-button:not([danger]):not([aria-disabled])[type~="link"]:not([loading]) button:active:hover {
	color: var(--color-primary-800, #163A79);
}

/* DANGER */
comp-button[danger]:not([aria-disabled])[type~="link"] button {
	color: var(--color-danger-600, #D82525);
	border-radius: var(--border-radius-corner-s, 4px);
	border: none;
	background: transparent;
	padding: var(--spacing-space-0, 0px);
	height: unset;
}

comp-button[danger]:not([aria-disabled])[type~="link"]:not([loading]) button:hover {
	color: var(--color-danger-700, #BA1B1B);
}

comp-button[danger]:not([aria-disabled])[type~="link"] button:focus-visible {
	outline: 2px solid var(--color-neutral-400, #8CA2B5);
	color: var(--color-danger-700, #BA1B1B);
}

comp-button[pressed][danger]:not([aria-disabled])[type~="link"] button,
comp-button[danger]:not([aria-disabled])[type~="link"]:not([loading]) button:active,
comp-button[danger]:not([aria-disabled])[type~="link"]:not([loading]) button.active,
comp-button[danger]:not([aria-disabled])[type~="link"]:not([loading]) button:active:hover {
	color: var(--color-danger-800, #9C1313);
}

/* LINK */

/* ICON -TOGGLE */
comp-button[type~="icon"] button,
comp-button[type~="toggle"] button {
	width: 40px;
	height: 40px;
	max-width: 40px;
	max-height: 40px;
}

comp-button[compact][type~="icon"] button,
comp-button[compact][type~="toggle"] button {
	width: 32px;
	height: 32px;
}

comp-button[type~="toggle"]:not([aria-disabled]) button {
	border: none;
	background: transparent;
	color: var(--color-neutral-600, #425567)
}

comp-button[type~="toggle"]:not([aria-disabled]):not([loading]):not([pressed]):not([active]) button:hover {
	outline: 1px solid var(--color-neutral-200, #D5DFEC);
	background: var(--color-neutral-100, #F3F4F7);
	color: var(--color-neutral-700, #314254);
}

comp-button[type~="toggle"]:not([aria-disabled]):not([loading]) button:hover:focus-visible {
	outline: 1px solid var(--color-neutral-0, #FFF);
	background: var(--color-neutral-100, #F3F4F7);
}

comp-button[pressed][type~="toggle"]:not([aria-disabled]) button,
comp-button[type~="toggle"]:not([aria-disabled]):not([loading]) button:active,
comp-button[type~="toggle"]:not([aria-disabled]):not([loading]) button.active,
comp-button[type~="toggle"]:not([aria-disabled]):not([loading]) button:active:hover{
	background: var(--color-neutral-200, #D5DFEC);
	border: none;
	outline: none;
}

comp-button[type~="toggle"]:not([aria-disabled]):not([loading]) button:active:focus-visible,
comp-button[type~="toggle"]:not([aria-disabled]):not([loading]) button:active:focus-visible:hover {
	background: var(--color-neutral-200, #D5DFEC);
	outline: 1px solid var(--color-neutral-0, #FFF);

}

comp-button[type~="toggle"]:not([aria-disabled]) button:focus-visible {
	outline: 1px solid var(--color-neutral-0, #FFF);
	background: var(--color-neutral-100, #F3F4F7);
	box-shadow: 0px 0px 0px 2px var(--color-neutral-400, #8CA2B5);
	color: var(--color-neutral-700, #314254);
	outline-offset: -1px;
}

comp-button[type~="toggle"][active][aria-disabled] button i,
comp-button[type~="toggle"][active]:not([aria-disabled]) button i {
	font-family: "Phosphor-Fill" !important;
}

comp-button[type~="toggle"][active]:not([aria-disabled]) button {
	color: var(--color-primary-600, #0E55B9);
}

comp-button[type~="toggle"][type~="subtle"][active]:not([aria-disabled]) button {
	background: var(--color-primary-100, #F0F9FF);
	outline: 1px solid var(--color-primary-200, #D8F0FE);
	outline-offset: -1px;
}

comp-button[type~="toggle"][active]:not([aria-disabled]):not([loading]) button:hover {
	color: var(--color-primary-700, #164FA1);
	outline: 1.5px solid var(--color-primary-300, #B2DFFE);
	background: var(--color-primary-200, #D8F0FE);
	outline-offset: -1.5px;
}

comp-button[type~="toggle"][active]:not([aria-disabled]):not([loading]) button:hover:focus-visible {
	background: var(--color-primary-200, #D8F0FE);
}

comp-button[type~="toggle"][active]:not([aria-disabled]) button:focus-visible {
	color: var(--color-primary-700, #164FA1);
	outline: 1px solid var(--color-neutral-0, #FFF);
	background: var(--color-primary-100, #F0F9FF);
	box-shadow: 0px 0px 0px 2px var(--color-neutral-400, #8CA2B5);
	outline-offset: -1px;
}

comp-button[pressed][type~="toggle"][active]:not([aria-disabled]) button,
comp-button[type~="toggle"][active]:not([aria-disabled]):not([loading]) button:active,
comp-button[type~="toggle"][active]:not([aria-disabled]):not([loading]) button.active,
	comp-button[type~="toggle"][active]:not([aria-disabled]):not([loading]) button:active:hover{
	background: var(--color-primary-300, #B2DFFE);
	color: var(--color-primary-700, #164FA1);
}

/* ICON -TOGGLE */

comp-button[type~="subtle"]:not([aria-disabled]) button {
	border: none;
	background: transparent;
	color: var(--color-neutral-500)
}

comp-button[type~="subtle"]:not([aria-disabled]):not([loading]):not([pressed]):not([active]) button:hover {
	background: var(--color-neutral-100, #F3F4F7);
	color: var(--color-neutral-600);
	outline: none;
}


comp-button[type~="subtle"]:not([aria-disabled]):not([loading]):not([pressed]):not([active]) button:active {
	background: var(--color-neutral-200);
	color: var(--color-neutral-700);
	outline: none;
}

comp-button[pressed][type~="subtle"]:not([aria-disabled]) button,
comp-button[type~="subtle"]:not([aria-disabled]):not([loading]) button:active,
comp-button[type~="subtle"]:not([aria-disabled]):not([loading]) button.active,
comp-button[type~="subtle"]:not([aria-disabled]):not([loading]) button:active:hover{
	background: var(--color-neutral-200, #D5DFEC);
	color: var(--color-neutral-700, #314254);
}

comp-button[type~="subtle"]:not([type~="toggle"]):not([aria-disabled]) button:focus-visible {
	outline: 2px solid var(--color-neutral-400, #8CA2B5);
	outline-offset: 1px;
	background: var(--color-neutral-100, #F3F4F7);
}

/* NAV-BAR VARIANT (SUBTLE)*/
comp-button[pressed][type~="toggle"][type~="subtle"][active]:not([aria-disabled]) button,
comp-button[type~="toggle"][type~="subtle"][active]:not([aria-disabled]):not([loading]) button:active,
comp-button[type~="toggle"][type~="subtle"][active]:not([aria-disabled]):not([loading]) button.active,
comp-button[type~="toggle"][type~="subtle"][active]:not([aria-disabled]):not([loading]) button:active:hover{
	outline: 1.5px solid var(--color-primary-400, #8CC9FD);
	outline-offset: -1.5px;
}

comp-button[type~="toggle"][type~="subtle"][active]:not([aria-disabled]) button:focus-visible {
	outline: 1.5px solid var(--color-primary-300, #B2DFFE);
	outline-offset: -1.5px;
}

/* NAV-BAR VARIANT (SUBTLE)*/

/* SEARCH VARIANT */
comp-button[type~="toggle"][type~="search"]:not([aria-disabled]) button {
	outline: 1px solid var(--color-neutral-200, #D5DFEC);
	outline-offset: -1px;
}

/* SEARCH VARIANT */

@media screen and (max-width: 640px) {
	comp-button[responsive][icon-left] button i:nth-of-type(2):last-of-type {
		display: none;
	}
}