/**
* seems the container query does not work as expected
*/

:host {
  display: inline-flex;
  width: 100%;
}

:host * {
    box-sizing: border-box;
  }

.shell-navigation-item {
  --swirl-app-icon-size: 2rem;
  --swirl-shell-navigation-item-gradient: linear-gradient(
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.8)
  );

  position: relative;
  display: flex;
  width: 100%;
  height: 3rem;
  padding: var(--s-space-8);
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: center;
  border: none;
  border-radius: var(--s-border-radius-sm);
  color: var(--s-text-default);
  background-color: var(--s-surface-overlay-default);
  font: inherit;
  font-size: var(--s-font-size-sm);
  font-weight: var(--s-font-weight-medium);
  line-height: var(--s-line-height-sm);
  text-decoration: none;
  cursor: pointer;
  container-type: size;
  gap: var(--s-space-12);
}

.shell-navigation-item .shell-navigation-item__badge {
    --swirl-badge-border-color: var(--s-surface-overlay-default);
  }

.shell-navigation-item:hover {
    background-color: var(--s-state-hovered);
  }

.shell-navigation-item:hover .shell-navigation-item__badge,
    .shell-navigation-item:hover .shell-navigation-item__is-new-badge {
      --swirl-badge-border-color: var(--s-state-hovered);
    }

.shell-navigation-item:active {
    background-color: var(--s-state-pressed);
  }

.shell-navigation-item:active .shell-navigation-item__badge,
    .shell-navigation-item:active .shell-navigation-item__is-new-badge {
      --swirl-badge-border-color: var(--s-state-pressed);
    }

.shell-navigation-item:focus {
    outline: none;
  }

.shell-navigation-item:focus-visible {
    z-index: 1;
    box-shadow: 0 0 0 0.125rem var(--s-focus-default);
  }

.shell-navigation-item.shell-navigation-item--boxed {
    --swirl-app-icon-size: 2rem;
  }

.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {
      overflow: hidden;
      border-radius: var(--s-border-radius-sm);
      background-color: var(--s-background-default);
      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);
    }

.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {
        border-radius: var(--s-border-radius-sm);
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
        min-height: 2rem;
      }

.shell-navigation-item.shell-navigation-item--filled {
    padding: var(--s-space-8);
  }

.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {
        color: var(--s-icon-on-action-primary);
        background-color: var(--s-action-primary-default);
      }

.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {
      position: inherit;
      width: 100%;
      height: 100%;
    }

.shell-navigation-item.shell-navigation-item--tiled {
    --swirl-app-icon-size: 100%;

    height: auto;
    padding: 0;
    align-items: start;
    border-radius: var(--s-border-radius-base);
    flex-direction: column;
    container-type: inline-size;
    gap: var(--s-space-8);
  }

.shell-navigation-item.shell-navigation-item--tiled:hover {
      background-color: transparent;
    }

.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {
        text-decoration: underline;
      }

.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {
      position: absolute;
      top: var(--s-space-12);
      left: var(--s-space-12);
    }

.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {
      position: inherit;
      width: 100%;
      height: 100%;
    }

.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {
      overflow: hidden;
      width: 100%;
      min-width: 100%;
      height: auto;
      min-height: auto;
      border-radius: var(--s-border-radius-base);
      background-color: var(--s-state-hovered);
      aspect-ratio: 1;
    }

.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {
          position: absolute;
          display: inline-block;
          width: 100%;
          border-radius: var(--s-border-radius-base);
          background-image: var(--swirl-shell-navigation-item-gradient);
          content: "";
          aspect-ratio: 1;
        }

.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {
      color: var(--s-text-default);
      font-weight: var(--s-font-weight-semibold);
      text-align: start;
    }

.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {
      position: absolute;
      bottom: var(--s-space-12);
      left: var(--s-space-12);
      margin-right: var(--s-space-12);
    }

.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {
        color: rgba(242, 242, 242, 1);
      }

.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {
        color: rgb(25, 25, 25);
      }

.shell-navigation-item.shell-navigation-item--app-icon {
    --swirl-app-icon-size: 100%;
    font-size: var(--s-font-size-xs);
    padding: var(--s-space-8) var(--s-space-4);
    align-items: center;
    height: auto;
    border-radius: var(--s-border-radius-sm);
    flex-direction: column;
    container-type: inline-size;
    gap: var(--s-space-8);
  }

.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {
      align-items: start;
      padding: var(--s-space-8);
      --swirl-app-icon-size: 2rem;
    }

.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {
        border-radius: var(--s-border-radius-sm);
        max-width: 2rem;
      }

.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {
        max-width: 2rem;
        max-height: 2rem;
      }

.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {
      overflow: hidden;
      width: 100%;
      max-width: 3.5rem;
      height: auto;
      border-radius: var(--s-border-radius-base);

      color: var(--s-icon-on-action-primary);
      aspect-ratio: 1;
    }

.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {
      max-width: 3.5rem;
      max-height: 3.5rem;
    }

.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {
      line-height: var(--s-line-height-xs);
      text-align: center;
    }

.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {
      position: absolute;
      width: 100%;
      height: 100%;
    }

.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {
      display: -webkit-box;
      overflow: hidden;
      white-space: normal;
      text-overflow: unset;
      overflow-wrap: anywhere;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {
      position: absolute;
      top: -0.375rem;
      right: -0.375rem;
      padding: var(--s-space-2);
    }

.shell-navigation-item.shell-navigation-item--active {
    background-color: var(--s-state-hovered);
  }

.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {
      color: var(--s-icon-highlight);
    }

.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {
      color: var(--s-text-highlight);
    }

.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {
      --swirl-badge-border-color: var(--s-state-hovered);
    }

.shell-navigation-item.shell-navigation-item--active:hover {
    background-color: var(--s-state-hovered);
  }

.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {
      --swirl-badge-border-color: var(--s-state-hovered);
    }

.shell-navigation-item.shell-navigation-item--active:active {
    background-color: var(--s-state-pressed);
  }

.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {
      --swirl-badge-border-color: var(--s-state-pressed);
    }

@media (min-width: 992px) {

.shell-navigation-item {
    background-color: var(--s-surface-sunken-default)
}

    .shell-navigation-item .shell-navigation-item__badge {
      --swirl-badge-border-color: var(--s-surface-sunken-default);
    }
  }

.shell-navigation-item__icon {
  display: inline-flex;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: var(--s-border-radius-base);
}

.shell-navigation-item__text-wrapper {
  overflow: hidden;
  min-width: 0;
  flex-grow: 1;
  text-align: start;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shell-navigation-item__description {
  margin-left: var(--s-space-8);
  font-weight: var(--s-font-weight-normal);
  color: var(--s-text-subdued);
}

.shell-navigation-item__badge {
  flex-shrink: 0;
  --swirl-badge-border-color: var(--swirl-shell-background);
}

.shell-navigation-item__is-new-tag {
  flex-shrink: 0;
}

.shell-navigation-item__is-new-badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  flex-shrink: 0;
  --swirl-badge-border-color: var(--swirl-shell-background);
}

@container (max-width: 4rem) {
  .shell-navigation-item__badge {
    position: absolute;
    top: var(--s-space-4);
    right: var(--s-space-4);
    padding: var(--s-space-2);
  }

  .shell-navigation-item--gradient .shell-navigation-item__icon {
    --swirl-shell-navigation-item-gradient: none;
  }

  .shell-navigation-item__badge--dot {
    top: var(--s-space-8);
    right: var(--s-space-8);
  }
}

@container (min-width: 10rem) {
  .shell-navigation-item__badge--dot {
    padding-right: var(--s-space-4);
  }
}