body :is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  &.admin-toolbar-control-bar {
    background-color: var(--color-gray-050);
    border: none;
    position: absolute;
    right: 3em;

    @media (max-width: 768px) {
      right: 1em;
    }

    .toolbar-button__label {
      display: none;
    }

    [class*="admin-toolbar-control-bar__burger"] {
      border: 1px solid var(--color-gray-500);
      margin-top: 10px;
    }
  }

  .admin-toolbar__content {
    .admin-toolbar__header {
      .admin-toolbar__close-button {
        border: 1px solid var(--color-gray-500);
      }
    }
  }
}

/*
 * Icon-only primary tabs (View / Edit / Delete / Revisions) on node and
 * user view/edit pages. Scoped server-side in
 * THEMENAME_preprocess_menu_local_task() / _menu_local_tasks() — these
 * classes only appear in markup on the scoped routes, so this CSS is
 * safe to keep global. One-to-one desktop layout forced on mobile too,
 * since Claro's nav-tabs.js library is detached for these routes.
 */
.tabs__link--icon-only {
  font-size: 0;
  justify-content: center;

  &::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
}

/* View — eye */
.tabs__link--icon-view::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Edit — pencil */
.tabs__link--icon-edit::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
}

/* Delete — trash */
.tabs__link--icon-delete::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

/* Revisions — clock */
.tabs__link--icon-revisions::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.tabs-wrapper:has(.tabs__link--icon-only) {
  display: flex;

  & .tabs {
    flex-direction: row;
    align-items: flex-end;
    width: auto;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  & .tabs__tab {
    display: inline-block !important; /* overrides .tabs__tab:not(.is-active){display:none} */
    border-block: none;
    background: none;
    font-size: var(--font-size-base);

    &.is-active {
      background: none;
      box-shadow: none;

      &::before {
        content: none;
      }
    }
  }

  & .tabs__link {
    padding-inline: 1rem;
    border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;

    &:hover {
      color: var(--color-absolutezero-hover);
      background: var(--tabs--hover-bg-color);
    }

    &:focus,
    &:active {
      border: none;
      outline: none;
      box-shadow: none;
    }

    &.is-active::before {
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: var(--tabs--active-height);
      border-right: none;
      border-bottom: var(--tabs--active-height) solid var(--color-absolutezero);
      border-left: none;
    }
  }

  & .tabs__trigger {
    display: none;
  }
}