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;

  .trigger {
    box-sizing: border-box;
    width: 2rem !important;
    height: 2rem !important;
    border: 1px solid var(--gin-border-color-layer2);
    border-radius: 50%;
    background: var(--gin-bg-layer3);
    box-shadow: 0 2px 4px rgb(0, 0, 0, 0.15);

    &::before {
      position: absolute;
      display: block;
      width: 0.75rem;
      height: 0.75rem;
      content: "";
      transform: translate(-50%, -50%);
      background: var(--gin-color-primary);
      inset-block-start: 50%;
      inset-inline-start: 50%;
      mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3e%3c/path%3e  %3c/g%3e%3c/svg%3e");
      mask-size: var(--space-s) var(--space-s);
      mask-position: 100% 100%;

      &:dir(rtl) {
        transform: translate(50%, -50%);
      }
    }

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

  &.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: 0 none;
  border-radius: var(--gin-border-l);
  background: var(--gin-bg-layer3);
  box-shadow: var(--gin-shadow-l2);
  inset-block-start: var(--space-xxs);

  li {
    background: transparent;

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

      &:hover,
      &:active {
        color: var(--gin-color-button-text);
        background: var(--gin-color-primary);
      }

      &:focus {
        outline: none;
        box-shadow:
          0 0 0 1px var(--gin-color-focus-border),
          0 0 0 4px var(--gin-color-focus);
      }
    }
  }

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

    &::before {
      inset-block-start: var(--space-xxs);
      inset-inline-start: var(--space-xxs);
      width: 1rem;
      height: 1rem;
      border: 2px solid var(--gin-color-button-text);
      border-inline-end: 2px dotted transparent;
    }
  }
}

.no-touchevents .contextual-region .contextual .contextual-links li a {
  &:hover,
  &:active {
    color: var(--gin-color-button-text);
    background: var(--gin-color-primary);
  }
}