contextual-links.css

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

/**
 * @file
 * Contextual links styles.
 */

.contextual {
  z-index: 100;
  box-sizing: border-box;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .trigger {
    overflow: clip;
    text-indent: -62.4375rem;
    border: 1px solid var(--admin-color-border-input);
    border-radius: 50%;
    background: var(--admin-color-bg-raised);
    box-shadow: 0 2px 4px rgb(0, 0, 0, 0.15);

    &,
    &.visually-hidden.focusable {
      width: 2rem;
      height: 2rem;
    }

    &::before {
      position: absolute;
      display: block;
      width: 0.75rem;
      height: 0.75rem;
      margin: auto;
      content: "";
      background: var(--admin-color-primary);
      inset: 0;
      mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e");
      mask-size: var(--admin-space-s);
      mask-position: 100% 100%;
    }

    &:hover {
      box-shadow:
        0 0 0 1px var(--admin-color-focus-border),
        0 0 0 4px var(--admin-color-focus);
    }

    @media (forced-colors: active) {
      border-color: buttonText;
      background: buttonFace;
      box-shadow: none;

      &::before {
        background: buttonText;
      }

      &:hover,
      &:focus,
      &:focus-visible {
        border-color: highlight;
        outline: 2px solid highlight;
        outline-offset: 2px;
        background: highlight;

        &::before {
          background: highlightText;
        }
      }
    }
  }

  &.open .trigger {
    border-block-end: 0 none;
    border-radius: 50%;
  }
}

.contextual-region .contextual .contextual-links {
  min-width: 7.5rem;
  margin: 0;
  padding: 0.5em;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-l);
  background: var(--admin-color-bg-raised);
  box-shadow: var(--admin-shadow-2);
  inset-block-start: var(--admin-space-2xs);

  li {
    background: transparent;

    a {
      margin: 0;
      padding: var(--admin-space-xs) var(--admin-space-m);
      white-space: nowrap;
      color: var(--admin-color-primary);
      border-radius: var(--admin-radius-s);
      background: transparent;
      font-family: var(--admin-font-family);
      line-height: 1;

      &:hover,
      &:active {
        color: var(--admin-color-text-on-primary);
        background: var(--admin-color-primary);

        @media (forced-colors: active) {
          -webkit-text-decoration: underline;
          text-decoration: underline;
        }
      }

      .no-touchevents 
      }
    }
  }

  .ajax-progress-throbber {
    border-radius: 50%;
    background: var(--admin-color-primary);
    inset-block-start: 0.125rem;

    &::before {
      position: absolute;
      display: block;
      width: 1.125rem;
      height: 1.125rem;
      content: "";
      animation: throbber 0.75s linear infinite;
      border: 2px solid var(--admin-color-primary);
      border-inline-end: 2px dotted transparent;
      border-radius: 50%;
      inset-block-start: var(--admin-space-xs);
      inset-inline-start: var(--admin-space-xs);
    }
  }
}

@keyframes throbber {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(360deg);
  }
}