shortcut.css in Drupal 10

Styling for the shortcut module.

File

core/themes/claro/css/components/shortcut.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Styling for the shortcut module.
 */

:root {
  /**
  * Shortcut action.
  */
  --shortcut-bg-color: var(--color-gray-800);
  --shortcut-border-radius-size: var(--base-border-radius);
  --shortcut-padding-size: calc(0.5 * var(--space-xs)) var(--space-m);
  --shortcut-icon-size: var(--space-l);
}

/**
 * Add/remove links.
 */

.shortcut-action {
  display: inline-block;
  margin-left: var(--space-xs); /* LTR */
}

[dir="rtl"] .shortcut-action {
  margin-right: var(--space-xs);
}

.shortcut-action__message {
  display: inline-block;
  margin-left: var(--space-s); /* LTR */
  padding: var(--shortcut-padding-size);
  transition: var(--transition);
  transform: translateY(calc(-1 * var(--space-xs)));
  vertical-align: top;
  opacity: 0;
  color: var(--color-white);
  border-radius: var(--shortcut-border-radius-size);
  background: var(--shortcut-bg-color);
  font-size: var(--font-size-label);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

[dir="rtl"] .shortcut-action__message {
  margin-right: var(--space-s);
  margin-left: 0;
}

.shortcut-action:hover .shortcut-action__message,
.shortcut-action:focus .shortcut-action__message {
  transform: translateY(0);
  opacity: 1;
}

.shortcut-action__icon {
  display: inline-block;
  width: var(--shortcut-icon-size);
  height: var(--shortcut-icon-size);
  vertical-align: -0.0625rem;
  background: transparent url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m42.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;
}

[dir="rtl"] .shortcut-action__icon {
  background-image: url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m29.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

.shortcut-action--add:hover .shortcut-action__icon,
.shortcut-action--add:focus .shortcut-action__icon {
  background-position: calc(-1 * var(--shortcut-icon-size)) top;
}

.shortcut-action--remove .shortcut-action__icon {
  background-position: calc(-2 * var(--shortcut-icon-size)) top;
}

.shortcut-action--remove:focus .shortcut-action__icon,
.shortcut-action--remove:hover .shortcut-action__icon {
  background-position: calc(-3 * var(--shortcut-icon-size)) top;
}