@use "@s360-base-theme/ui-core/site-config";
@use "@s360-base-theme/ui-core/colors";
@use "@s360-base-theme/ui-core/typography";
@use "s360-scss-toolkit";

.menu--local-tasks {
  display: flex;
  flex-wrap: wrap;
  z-index: 1000;
  position: fixed;
  inset: 0;
  top: unset;
  border-top: 3px solid colors.$black;
  gap: 0.5em;
  background-color: colors.$white;

  a {
    --a--color: #{ colors.$black };
    --a--padding: 0.5em;
    --a--display: block;

    // Drupal class.
    &.is-active {
    }
  }

  .menu__item {
    &:first-child {
      --li--margin: 0 0 0 var(--safe-area-inline);
    }

    &:last-child {
      --li--margin: 0 var(--safe-area-inline) 0 0;
    }

    &--node-id {
      align-self: center;
      margin-left: auto;
      font-weight: typography.$font-weight-bold;
    }
  }
}
