@utrecht/components/dist/link-social/css/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2022 The Knights Who Say NIH! B.V.
 * Copyright (c) 2022 Gemeente Utrecht
 */
/* stylelint-disable scss/no-global-function-names */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Gemeente Utrecht
 * Copyright (c) 2021 Robbert Broersma
 */
/* stylelint-disable-next-line block-no-empty */
.utrecht-link-social {
  --utrecht-icon-size: var(--utrecht-link-social-icon-size);
  --utrecht-icon-color: currentColor;
  align-items: center;
  background-color: var(--utrecht-link-social-background-color);
  block-size: var(--utrecht-link-social-size);
  border-color: var(--utrecht-link-social-border-color);
  border-radius: 50%;
  border-style: solid;
  border-width: var(--utrecht-link-social-border-width);
  color: var(--utrecht-link-social-color);
  display: inline-flex;
  inline-size: var(--utrecht-link-social-size);
  justify-content: center;
}

.utrecht-link-social:hover,
.utrecht-link-social--hover {
  background-color: var(--utrecht-link-social-hover-background-color, var(--utrecht-link-social-background-color));
  color: var(--utrecht-link-social-hover-color, var(--utrecht-link-social-color));
  transform: var(--utrecht-link-social-hover-transform-scale);
}

.utrecht-link-social:focus-visible,
.utrecht-link-social--focus-visible {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
}

.utrecht-link-social--distanced {
  margin-inline-start: var(--utrecht-link-social-margin-inline-start);
}