/** @define Header */
.vb-header {
  box-sizing: border-box;
  // 本体サイズ + Container の左右 margin 分
  min-width: $vbContainerSize + $vbLargeSize * 2;
  height: $vbXXLargeSize + $vbBasicSize * 2;
  padding: $vbBasicSize $vbLargeSize;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  font-size: $vbCaptionFontSize;

  @if $use2021Style {
    padding: ($vbXSmallSize + $vbSmallSize) $vbLargeSize $vbXSmallSize;
    height: $vbXXLargeSize + $vbSmallSize + $vbXSmallSize * 2;
  }

  &--disableGutters {
    min-width: $vbContainerSize;
  }

  & &__logo {
    width: fit-content;
  }

  & &__info {
    text-align: center;
    display: flex;
    align-items: flex-end;
    width: fit-content;
  }

  & &__children {
    display: flex;
    flex: 1;
    padding: 0 2rem;
    align-items: center;
  }

  & &__plan {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 0.2em;
    margin-bottom: -0.1em;
    font-weight: bold;
    border: 1px solid $vbPrimaryColor;
    color: $vbPrimaryColor;
    text-decoration: none;
  }

  & &__icon {
    vertical-align: middle;
    width: $vbBasicSize;
    height: $vbBasicSize;

    &--notice {
      color: $vbNoticeColor;
    }

    &--alert {
      color: $vbAlertColor;
    }
  }

  & &__text {
    vertical-align: middle;
  }

  & &__link {
    color: $vbBlackColor;
    transition-duration: 0.2s;
    transition-property: background-color;

    &:hover {
      background-color: $vbColorsS01;
    }
  }

  & &__button {
    color: $vbBlackColor;
    display: inline;
    border: 0;
    background: transparent;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    font-size: $vbCaptionFontSize;
    transition-duration: 0.2s;
    transition-property: background-color;

    &--active {
      background-color: $vbBaseColor1;
    }

    &:hover {
      background-color: $vbColorsS01;
    }
  }

  & &__icon + &__text {
    margin-left: 0.2em;
  }

  & &__section {
    position: relative;

    &:not(:last-child) {
      margin-right: 1em;
    }
  }

  & &__dropdownWrapper {
    padding-bottom: 8px;
  }

  & &__badge {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: $vbFullBorderRadius;
    background: $vbAlertColor;
    display: block;
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
    border: solid 1px #ffff;
  }
}