@telekom/scale-components/dist/collection/components/link/link.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

/* notes for the `:visited` state
*
* Due to privacy restrictions this state is not styled differently than the initial state
* https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#privacy_restrictions
*/

:host {
  --font-weight: ;
  --spacing-x-icon: var(--telekom-spacing-composition-space-03);
  --line-offset: 0.0625em;

  /* initial */
  --color: var(--telekom-color-text-and-icon-link-standard);
  --color-line-initial: var(--telekom-color-functional-interaction-subtle);
  --line-thickness-initial: var(--telekom-line-weight-standard);
  /* visited */
  --color-visited: var(--telekom-color-text-and-icon-link-visited);
  --color-line-visited: currentColor;
  --line-thickness-visited: var(--line-thickness-initial);
  /* hover */
  --color-hover: var(--telekom-color-text-and-icon-link-hovered);
  --color-line-hover: currentColor;
  --line-thickness-hover: var(--telekom-line-weight-highlight);
  /* focus */
  --color-focus-outline: var(--telekom-color-functional-focus-standard);
  --color-focus: var(--telekom-color-text-and-icon-link-standard);
  --color-line-focus: transparent;
  --line-thickness-focus: 0;
  /* active */
  --color-active: var(--telekom-color-text-and-icon-link-active);
  --color-line-active: currentColor;
  --line-thickness-active: var(--telekom-line-weight-highlight);
  /* disabled */
  --color-disabled: var(--telekom-color-text-and-icon-disabled);
  --color-line-disabled: transparent;
  --line-thickness-disabled: var(--line-thickness-initial);
}

:host {
  display: inline;
  margin-bottom: calc(var(--line-offset) + var(--line-thickness-initial));
}

[part='anchor'] {
  cursor: pointer;
  outline: none;
  font-weight: var(--font-weight);
  color: var(--color);
  position: relative;
  display: inline-flex;
  text-decoration: underline;
  text-underline-offset: 0.1875em;
  text-underline-position: from-font;
  text-decoration-thickness: var(
    --line-thickness,
    var(--line-thickness-initial)
  );
  /*FIXME:TOKEN color decoration should have 0.75 opacity*/
  text-decoration-color: var(--line-color);
}

[part='anchor'] {
  display: inline-flex;
  align-items: center;
}

[part='content'] {
  position: relative;
}

slot[name='icon']::slotted(*) {
  position: relative;
  margin-left: var(--spacing-x-icon);
}

/* states */

:host(.reverse) [part='anchor'] {
  flex-direction: row-reverse;
}

:host(.reverse) slot[name='icon']::slotted(*) {
  margin-left: auto;
  margin-right: var(--spacing-x-icon);
}

:host(.no-underline) {
  --color-line-initial: transparent;
  --color-line-visited: transparent;
  --line-color: transparent;
}

:host(.no-underline) [part='anchor'] {
  text-decoration: none;
}

[part='anchor']:hover,
[part='anchor']:focus,
[part='anchor']:active,
:host(.no-underline) [part='anchor']:hover,
:host(.no-underline) [part='anchor']:active {
  text-decoration: underline;
}

[part='anchor']:hover,
:host(.no-underline) [part='anchor']:hover {
  color: var(--color-hover);
  text-decoration-color: var(--color-line-hover);
  text-decoration-thickness: var(
    --line-thickness-hover,
    var(--line-thickness-initial)
  );
}

[part='anchor']:focus,
[part='anchor']:focus-visible {
  color: var(--color-focus);
  text-decoration-color: var(--color-line-focus);
  text-decoration-thickness: var(
    --line-thickness-focus,
    var(--line-thickness-initial)
  );
  outline: var(--telekom-line-weight-highlight) solid var(--color-focus-outline);
  outline-offset: var(--telekom-spacing-composition-space-01);
  border-radius: var(--telekom-radius-small);
}

[part='anchor']:active,
:host(.no-underline) [part='anchor']:active {
  color: var(--color-active);
  text-decoration-color: var(--color-line-active);
  text-decoration-thickness: var(
    --line-thickness-active,
    var(--line-thickness-initial)
  );
}

[part='anchor']:visited {
  color: var(--color-visited);
  text-decoration-color: var(--color-line-visited);
  text-decoration-thickness: var(
    --line-thickness-visited,
    var(--line-thickness-initial)
  );
}

/* disabled */

:host(.disabled) {
  cursor: not-allowed;
}

:host(.disabled) [part='anchor'],
:host(.disabled) [part='anchor']:visited,
:host(.disabled) [part='anchor']:hover,
:host(.disabled) [part='anchor']:active {
  color: var(--color-disabled);
  text-decoration: none;
  cursor: not-allowed;
  pointer-events: none;
}