.header {
  #common.block-base();
}

.header__grid {
  #common.element-base();
  justify-content: space-between;
  align-items: center;
}

.header__fold {
  #common.element-item();
  width: auto;
}

.header__collapse {
  #common.element-item();
  width: auto;
  display: flex;
  max-width: ~"calc(100vw - var(--common-blockGap-horizontal) * 2)";
}

.header__nav {
  overflow: hidden;
  clip-path: inset(0 0 20px 0);
  margin-bottom: -20px;
  margin-right: ~"calc(var(--common-blockGap-horizontal) * -1)";
  margin-left: ~"calc(var(--common-blockGap-horizontal) * -1)";

  & > *:first-child {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;

    & > *:first-child {
      padding-left: var(--common-blockGap-horizontal);
    }

    & > *:last-child {
      padding-right: var(--common-blockGap-horizontal);
    }
  }
}

.header__menu {
  display: flex;
  align-items: center;

  li {
    white-space: nowrap;

    &:not(:last-child) {
      margin-right: var(--common-indent-large);
    }
  }
}