@use 'sass:map';
@use '@ecl/theme-ec/theme' as *;

$_nav-width: 15rem;
$_nav-logo-height: 2rem;
$_nav-logo-max-width: 10rem;
$_nav-toggle-size: 2.75rem; // 44px
$_nav-toggle-bar-width: 1.5rem; // 24px
$_nav-toggle-bar-height: 0.125rem; // 2px
$_nav-toggle-bar-spacing-between: 0.375rem;

.nav {
  background-color: var(--ws-c-n-20);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.4);
  bottom: 0;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: transform 300ms ease;
  width: $_nav-width;
  z-index: 50;

  :global(.no-js) & {
    position: static;
    width: 100%;

    @media screen and (width >= 1140px) {
      position: fixed;
      width: $_nav-width;
    }
  }
}

.nav--closed {
  overflow: visible;
  transform: translate(-$_nav-width, 0);

  :global(.no-js) & {
    transform: translate(0, 0);
  }
}

.header {
  background-color: map.get($theme, 'color', 'white');
  border-bottom: 2px solid var(--ws-c-n-60);
  padding: var(--ws-s-m) var(--ws-s-s) var(--ws-s-m) var(--ws-s-m);
}

.version {
  background-color: var(--ws-c-p-20);
  border-radius: 12px;
  color: var(--ws-c-d);
  display: inline-block;
  font: var(--ws-f-s);
  padding: var(--ws-s-2xs) var(--ws-s-s);
}

.logo {
  background-image: url('~@ecl/preset-ec/dist/images/logo/positive/logo-ec--en.svg');
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: $_nav-logo-height;
  margin-top: var(--ws-s-l);
  max-width: $_nav-logo-max-width;
}

.logo--eu {
  background-image: url('~@ecl/preset-eu/dist/images/logo/standard-version/positive/logo-eu--en.svg');
}

.logo-sr {
  display: none;
}

.title {
  color: var(--ws-c-d);
  font: var(--ws-f-m);
  margin-top: var(--ws-s-s);
}

.system-list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.system-list-item {
  flex-grow: 1;
  text-align: center;
}

.system-list-item-link {
  background-color: var(--ws-c-n-80);
  color: var(--ws-c-d);
  display: block;
  font: var(--ws-f-l);
  font-weight: map.get($theme, 'font-weight', 'bold');
  padding: var(--ws-s-s) 0;
  text-decoration: none;

  &:hover,
  &:focus {
    background-color: var(--ws-c-n-60);
    outline: none;
  }
}

.system-list-item-link--selected {
  background-color: var(--ws-c-n-20);
}

.loading {
  color: var(--ws-c-d);
  font: var(--ws-f-m);
  padding: var(--ws-s-s);
}

/* Burger */

.button-toggle {
  align-items: center;
  background-color: map.get($theme, 'color', 'white');
  border: 1px solid transparent;
  color: var(--ws-c-d);
  display: flex;
  justify-content: center;
  height: $_nav-toggle-size;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 300ms;
  width: $_nav-toggle-size;
  z-index: 51;

  :global(.no-js) & {
    display: none;
  }

  &:hover {
    background-color: var(--ws-c-p-20);
    border-color: var(--ws-c-d-80);
    cursor: pointer;
  }
}

.button-toggle--closed {
  transform: translate($_nav-toggle-size);
}

.hamburger-inner {
  display: block;
  margin-top: -($_nav-toggle-bar-height * 0.5);
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  background-color: var(--ws-c-d-80);
  height: $_nav-toggle-bar-height;
  position: absolute;
  width: $_nav-toggle-bar-width;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: '';
  display: block;
}

.hamburger-inner::before {
  top: -($_nav-toggle-bar-spacing-between + $_nav-toggle-bar-height);
}

.hamburger-inner::after {
  bottom: -($_nav-toggle-bar-spacing-between + $_nav-toggle-bar-height);
}

.button-toggle .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.button-toggle .hamburger-inner::before {
  transition:
    top 0.075s 0.12s ease,
    opacity 0.075s ease;
}

.button-toggle--open .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.button-toggle--open .hamburger-inner::before {
  opacity: 0;
  top: 0;
  transition:
    top 0.075s ease,
    opacity 0.075s 0.12s ease;
}

.button-toggle--open .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition:
    bottom 0.075s ease,
    transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.button-toggle--closed .hamburger-inner::after {
  transition:
    bottom 0.075s 0.12s ease,
    transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
