/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
/* Default style and mobile behaviour */
:host {
  --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);
  --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);
  --wcs-com-nav-item-arrow-icon-color: var(--wcs-semantic-color-foreground-action-neutral-default);
  --wcs-com-nav-item-arrow-icon-font-size: 0.6rem;
  --wcs-com-nav-item-arrow-icon-font-family: icons;
  --wcs-com-nav-item-arrow-icon-line-height: 1;
  --wcs-com-nav-item-focus-outline-color: var(--wcs-semantic-color-border-focus-base);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--wcs-com-nav-item-gap);
  height: fit-content;
  padding: 0 8px;
  font: inherit;
  /* Common behaviour between Large Screen and Small Screens */
  /**For mobile*/
}
:host ::slotted(a) {
  /* Default */
  user-select: none;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-weight: inherit;
  display: flex;
  align-items: center;
}
:host .arrow-icon {
  display: inline-block;
  font-family: icons;
  color: var(--wcs-com-nav-item-arrow-icon-color);
  font-size: var(--wcs-com-nav-item-arrow-icon-font-size);
  line-height: var(--wcs-com-nav-item-arrow-icon-line-height);
  box-sizing: border-box;
}
:host .arrow-container {
  display: unset;
}
:host ::slotted(a:focus-visible) {
  outline: none;
}

:host(:focus-within) {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-item-focus-outline-color);
  outline-offset: 0.5rem;
  border-radius: 2px;
}

/* Large screen, specific behaviour */
@media screen and (min-width: 576px) {
  :host ::slotted(a) {
    display: flex;
    align-items: center;
    height: 100%;
    /* Reset for pc */
    padding-top: unset;
    padding-bottom: unset;
    padding-left: unset;
  }
}