.gin-sticky-form-actions {
  display: flex;
  gap: var(--gin-spacing-xxs);

  > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  > input + input {
    margin-inline-start: var(--gin-spacing-xxs) !important;
  }

  // Hide if no items are present.
  [data-drupal-selector="edit-gin-actions"]:empty,
  .gin-more-actions:has(> .gin-more-actions__menu:empty) {
    display: none;
  }

  .gin-more-actions {
    position: relative;

    &__menu.form-actions {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      top: 100%;
      right: 0;
      min-width: 200px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: var(--gin-spacing-xs);
      background-color: var(--gin-bg-layer3);
      border-radius: var(--gin-border-l);
      box-sizing: border-box;
      box-shadow: var(--gin-shadow-l2);
      transition: opacity var(--gin-transition-fast);

      // Increase order.
      .action-link.action-link,
      a:not(.button--danger):not(.action-link--danger),
      .button.button {
        font-size: var(--gin-font-size-s);
        font-weight: var(--gin-font-weight-semibold);
        line-height: 1;
        text-align: left;
        text-decoration: none;
        width: 100%;
        max-width: 320px;
        padding: var(--gin-spacing-s) var(--gin-spacing-m);
        margin: 0 !important;
        border: 0 !important;
        border-radius: var(--gin-border-s);
        box-shadow: none;
        box-sizing: border-box;
      }

      a:not(.button--danger):not(.action-link--danger),
      .action-link:not(.action-link--danger) {
        &:hover,
        &:active {
          color: var(--gin-color-button-text);
          background-color: var(--gin-color-primary);

          &::before {
            background-color: var(--gin-bg-layer) !important;
          }
        }
      }

      // Hide throbber.
      > * + .ajax-progress--throbber {
        display: none;
      }
    }

    &__trigger {
      cursor: pointer;
      background: transparent;
      display: block;
      height: 32px;
      width: 32px;
      border-radius: var(--gin-border-m);
      transition: background var(--gin-transition-fast);

      &::before {
        display: inline-block;
        width: 100%;
        height: 100%;
        content: "";
        mask-repeat: no-repeat;
        mask-position: center center;
        background-color: var(--gin-icon-color);
        mask-image: icon('more');
        mask-size: var(--gin-icon-size-toolbar-secondary) var(--gin-icon-size-toolbar-secondary);
        border-radius: 50%;
      }

      &:hover, &:focus {
        background-color: var(--gin-color-primary-light);

        &::before {
          background-color: var(--gin-color-primary);
        }
      }

      &.is-active {
        background-color: var(--gin-color-primary-light-hover);

        &::before {
          background-color: var(--gin-color-primary-active);
        }
      }
    }

    &__trigger[aria-expanded="true"] {
      ~ .gin-more-actions__menu {
        visibility: visible;
        opacity: 1;
      }

      // Hide tooltip
      ~ .gin-tooltip {
        visibility: hidden;
        opacity: 0;
        transition: none !important;
      }
    }
  }
}

// Hide actions if we preprocessed them.
.gin-sticky-form-actions--preprocessed ~ .layout-container form.gin--has-sticky-form-actions .gin-sticky-form-actions {
  @include visually-hidden;
}

// Hide trigger in dialogs.
.ui-dialog-content .gin-more-actions__trigger {
  display: none;
}
