@use '../../../common/scss/global.scss';
@use '~@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';

:host {
  display: block;
}

nav {
  @include typography.type-ui-02;
  position: fixed;
  top: 0;
  padding: 0 4px 4px;
  padding-top: calc(var(--kd-header-height));
  left: 0;
  bottom: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--kd-color-background-ui-soft);
  box-shadow: 1px 0 0 var(--kd-color-border-light);
  z-index: var(--kd-z-local-nav);
  transition: width 150ms ease-in-out;
  width: var(--kd-local-nav-width);

  &.nav--expanded {
    width: 100%;

    @media (min-width: 42rem) {
      width: var(--kd-local-nav-width-expanded);
    }
  }
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.toggle-container {
  display: flex;
  padding-top: 4px;
}

.nav-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background: none;
  color: var(--kd-color-text-link);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: background-color 150ms ease-out, color 150ms ease-out,
    outline-color 150ms ease-out;

  kd-icon {
    display: block;
  }

  &:hover {
    background-color: var(--kd-color-background-primary);
    color: var(--kd-color-text-inversed);
  }

  &:focus {
    outline-color: var(--kd-color-border-focus);
  }

  &:active {
    background-color: var(--kd-color-background-primary-pressed);
    color: var(--kd-color-text-inversed);
  }
}

nav {
  display: none;

  &.nav--expanded {
    display: flex;
  }
}

.nav-toggle {
  display: none;
}

.mobile-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--kd-color-border-light);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  z-index: calc(var(--kd-z-local-nav) + 1);

  kd-icon {
    display: block;
  }
}

@media (min-width: 42rem) {
  nav {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-toggle {
    display: none;
  }
}