:root{
    --w-header-main--hor: 100%;
    --h-header-main--hor: 62px;
    --pdg-header-main--hor: 0 16px;

    --pdg-b-main-content:var(--pdg-t-b-main-content);

    --w-header-main--ver: 108px;
    --h-header-main--ver: 100dvh;

    --color-background--header: var(--color-primary);
    --color-on-background--header: var(--color-on-primary);
    --color-background-container--header: var(--color-primary-container);
    --color-on-background-container--header: var(--color-on-primary-container);
}

.header-main--container {
  position: fixed;
  z-index: 6;
}

.header-main--container.horizontal {
    position: fixed;
    z-index: 3;
    width: var(--w-header-main--hor);
    height: var(--h-header-main--hor);
    max-height: var(--h-header-main--hor);
    background-color: var(--color-background);
    color: var(--color-on-background);
    fill:var(--color-on-background);
    justify-content: center;
    border-bottom: 1px solid var(--color-outline-variant);
}

.header-main--container.hor-after-ver {
  width: var(--w-header-main--hor);
  height: var(--h-header-main--hor);
  max-height: var(--h-header-main--hor);
}

.header-main--container.hor-after-ver.rail {
  background-color: var(--color-primary);
}

.header-main--container.hor-after-ver.rail .low{
    color: var(--color-on-primary);
    fill: var(--color-on-primary);
}

.header-main--container.hor-after-ver .header-main--content {
  padding: var(--pdg-header-main--hor);
}

.header-main--content {
  width: 100%;
  align-items: center;
}

@media screen and (min-width: 640px) {
  .header-main--container.hor-after-ver {
    width: var(--w-header-main--ver);
    height: var(--h-header-main--ver);
    max-height: var(--h-header-main--ver);
  }
  .header-main--container.hor-after-ver .header-main--content {
    flex-direction: column;
  }
}