.local-tasks-nav {

  --rdxa--local-tasks-primary-bottom-border: var(--border-width) var(--border-style) var(--border-color);
  --rdxa--local-tasks-primary-active-color: var(--fg-body, blue);
  --rdxa--local-tasks-primary-item-color: var(--fg-body, inherit);
  --rdxa--local-tasks-primary-item-font-size: var(--body-font-size, inherit);
  --rdxa--local-tasks-primary-item-padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
  --rdxa--local-tasks-primary-item-border-radius: var(--radius-4);
  --rdxa--local-tasks-primary-item-link-focus-color: var(--bg-3, rgba(0, 0, 0, 0.5));
  --rdxa--local-tasks-primary-item-link-padding: 0.3rem 0.6rem;


  --rdxa--local-tasks-secondary-active-color: var(--bg-body, rgba(255, 255, 255, 0.5));
  --rdxa--local-tasks-secondary-item-color: var(--fg-body, inherit);
  --rdxa--local-tasks-secondary-item-font-size: var(--body-font-size, inherit);
  --rdxa--local-tasks-secondary-item-padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
  --rdxa--local-tasks-secondary-item-border-radius: var(--radius-3);
  --rdxa--local-tasks-secondary-item-link-focus-color: var(--bg-3, rgba(0, 0, 0, 0.5));
  --rdxa--local-tasks-secondary-item-link-padding: 0.2rem 0.5rem;

}

.local-tasks-nav.tabs--primary {
  view-transition-name: local-task-primary;
  position: relative;
  flex-wrap: nowrap;
  border-bottom: var(--rdxa--local-tasks-primary-bottom-border);

  .nav-item {
    position: relative;

    align-items: center;
    justify-content: center;
    padding: var(--rdxa--local-tasks-primary-item-padding);
  }

  .nav-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
  }

  .nav-item.active {
    font-weight: 600;
    opacity: 1;
    background: transparent;
    &::before {
      view-transition-name: local-task-primary-active;
      background-color: var(--rdxa--local-tasks-primary-active-color);
    }
  }

  .nav-link {
    opacity: 0.8;
    color: var(--rdxa--local-tasks-primary-item-color);
    border-radius: var(--rdxa--local-tasks-primary-item-border-radius);
    font-size: var(--rdxa--local-tasks-primary-item-font-size);
    padding: var(--rdxa--local-tasks-primary-item-link-padding);
    white-space: nowrap;
  }

}

.local-tasks-nav.tabs--secondary {

  position: relative;
  flex-wrap: nowrap;

  .nav-item{
    position: relative;
    border-radius: var(--rdxa--local-tasks-secondary-item-border-radius);
  }

  .nav-item::after{
    z-index: 0;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: inherit;
  }

  .nav-item.active::after{
    view-transition-name: local-task-secondary-active;
    background-color: var(--rdxa--local-tasks-secondary-active-color);
  }

  .nav-link{
    position: relative;
    z-index: 1;
    opacity: 0.5;
    color: var(--rdxa--local-tasks-secondary-item-color);
    padding: var(--rdxa--local-tasks-secondary-item-link-padding);
    background: transparent;
  }

  .nav-link:hover,
  .nav-link.active{
    opacity: 1;
  }

}


::view-transition-old(local-task-primary),
::view-transition-old(local-task-primary-active),
::view-transition-old(local-task-secondary-active){
  height: 100%;
}

::view-transition-new(local-task-primary),
::view-transition-new(local-task-primary-active),
::view-transition-new(local-task-secondary-active){
  height: 100%;
}