.header {
  height: 100px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 5;

  [data-color-scheme='dark'] &,
  [data-color-scheme='auto'] & {
    background-color: var(--ds-color-neutral-background-tinted);
  }

  &.transparentHeader {
    background-color: transparent;
  }

  & .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 var(--ds-size-8);

    & nav {
      display: flex;
      gap: var(--ds-size-2);

      & button {
        height: fit-content;
      }

      & ul {
        display: flex;
        margin: 0;
        padding: 0;
        max-width: 100%;
        align-items: center;
        margin-right: var(--ds-size-2);

        li {
          list-style: none;
          margin-left: var(--ds-size-7);

          & a {
            color: inherit;
            text-decoration: none;
            border-bottom: 3px solid transparent;
            padding-bottom: var(--ds-size-2);
            transition: 0.1s border-color ease-out;

            &:hover,
            &:focus-visible {
              border-color: var(--ds-color-neutral-border-subtle);
            }

            &.active {
              border-color: var(--ds-color-neutral-border-strong);
              font-weight: 500;
            }
          }
        }
      }
      &[data-mobile='true'] {
        & .desktopMenu {
          display: none;
        }
      }
    }
  }
}

.logoContainer {
  display: flex;
  align-items: center;
  gap: var(--ds-size-4);

  & .logo {
    height: 34px;
    width: auto;
  }

  & .logoLink {
    display: flex;
    align-items: center;

    & svg [data-text] {
      fill: var(--ds-color-neutral-text-default);
    }
  }
}

.tag {
  background-color: light-dark(#e0d6eb, #4f2776);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 16px;
  font-weight: 500;
}

.toggle {
  display: flex;
  border: none;
  place-self: flex-end;
}

.hamburger {
  &.header {
    height: 72px;

    & nav {
      gap: var(--ds-size-1);

      & ul {
        border-top: 1px solid var(--ds-color-neutral-border-subtle);
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 75px;
        background-color: var(--ds-color-neutral-background-default);
        box-shadow: var(--ds-shadow-lg);
        flex-direction: column;
        display: none;
        padding: 20px 0;
        width: 100%;

        &[data-open='true'] {
          display: block;
        }

        & li {
          padding: 20px 0;
          margin-left: 16px;

          & .active {
            display: inline-block;
          }
        }
      }
    }
  }

  .logo {
    height: 26px;
  }
}

.toggleButton svg {
  font-size: 1.5em;
}
