@import "./InvisibleTextStyles.css";

:host(:not([hidden])) {
	display: inline-flex;
}

:host {
	max-width: 100%;
	color: var(--sapLinkColor);
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSize);
	cursor: pointer;
	outline: none;
	text-decoration: var(--_ui5_link_text_decoration);
	text-shadow: var(--sapContent_TextShadow);
	white-space: normal;
	overflow-wrap: break-word;
}

:host(:hover) {
	color: var(--sapLink_Hover_Color);
	text-decoration: var(--_ui5_link_hover_text_decoration);
}

:host(:active) {
	color: var(--sapLink_Active_Color);
	text-decoration: var(--_ui5_link_active_text_decoration);
}

:host([disabled]) {
	pointer-events: none;
}

:host([disabled]) .ui5-link-root {
	text-shadow: none;
	outline: none;
	cursor: default;
	pointer-events: none;
	opacity: var(--sapContent_DisabledOpacity);
}

:host([design="Emphasized"]) .ui5-link-root {
	font-family: var(--sapFontBoldFamily);
}

:host([design="Subtle"]) {
	color: var(--sapLink_SubtleColor);
	text-decoration: var(--_ui5_link_subtle_text_decoration);
}

:host([design="Subtle"]:hover:not(:active)) {
	color: var(--sapLink_SubtleColor);
	text-decoration: var(--_ui5_link_subtle_text_decoration_hover);
}

:host([wrapping-type="None"]) {
	white-space: nowrap;
	overflow-wrap: normal;
}

.ui5-link-root {
	max-width: 100%;
	display: inline-block;
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	outline: none;
	white-space: inherit;
	overflow-wrap: inherit;
	text-decoration: inherit;
	color: inherit;
}

/* For cases when the text wraps, the icon should be displayed at the last row */
:host([wrapping-type="None"][end-icon]) .ui5-link-root {
	display: inline-flex;
	align-items: end;
}

:host .ui5-link-root {
	outline-offset: -0.0625rem;
	border-radius: var(--_ui5_link_focus_border-radius);
}

.ui5-link-icon, 
.ui5-link-end-icon {
	color: inherit;
	flex-shrink: 0;
}

.ui5-link-icon {
	float: inline-start;
	margin-inline-end: 0.125rem;
}

.ui5-link-end-icon {
	margin-inline-start: 0.125rem;
	vertical-align: bottom;
}

.ui5-link-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui5-link-root:focus-visible,
:host([desktop]) .ui5-link-root:focus-within,
:host([design="Subtle"]) .ui5-link-root:focus-visible,
:host([design="Subtle"][desktop]) .ui5-link-root:focus-within {
	background-color: var(--_ui5_link_focus_background_color);
	outline: var(--_ui5_link_outline);
	border-radius: var(--_ui5_link_focus_border-radius);
	text-shadow: none;
	color: var(--_ui5_link_focus_color);
}

:host(:not([desktop])) .ui5-link-root:focus-visible,
:host([desktop]:focus-within),
:host([design="Subtle"][desktop]:focus-within) {
	text-decoration: var(--_ui5_link_focus_text_decoration);
}

:host([desktop]:hover:not(:active):focus-within),
:host([design="Subtle"][desktop]:hover:not(:active):focus-within) {
	color: var(--_ui5_link_focused_hover_text_color);
	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
}

:host([interactive-area-size="Large"]) .ui5-link-root {
	line-height: var(--_ui5_link_large_interactive_area_height);
}

:host([interactive-area-size="Large"])::part(icon), 
:host([interactive-area-size="Large"])::part(endIcon) {
	height: var(--_ui5_link_large_interactive_area_height);
}