.pre-header {
  $button-transition-time: 150ms;
  $padding-vertical: -1;

  position: relative;

  &__content {
    @include content-container;
    padding: spacing($padding-vertical) spacing($page-padding-side) spacing($button-padding-vertical-small, $times: 1, $add: spacing($padding-vertical), $subtract: line-height("single", $include-calc: false, $times: -.5));
    border-bottom: $width-border solid color("border");

    @include breakpoint("max-width") {
      padding-left: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
      padding-right: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
    }
  }

  &__toggle {
    position: absolute;

    left: spacing($button-padding-vertical-small, $times: -1, $add: 50%, $subtract: line-height("single", $include-calc: false, $times: .5));
    z-index: $z-index-just-above-static;

    &--hide {
      bottom: spacing($button-padding-vertical-small, $times: -1, $add: #{$width-border * .5}, $subtract: line-height("single", $include-calc: false, $times: .5));

      @include set-icon("collapse", $include-pseudo: "before");
    }

    &--show {
      top: 0;
      padding: spacing(-4) spacing(-2) 0 spacing(-2);

      .button {
        transform: translateY(spacing(2));
        transform: translateY(spacing($button-padding-vertical-small, $times: 2, $add: spacing(0), $subtract: line-height("single", $include-calc: false, $times: -1), $divideby: -1));
        transition: transform $button-transition-time $easing-in;

        @include set-icon("expand", $include-pseudo: "before");
      }

      &:hover {
        .button {
          background-color: color("theme-hover");
          transform: translateY(0);
          transition: transform $button-transition-time $easing-out;
        }
      }

      &:active {
        .button {
          box-shadow: $shadow-style-back color("shadow");
        }
      }
    }
  }
}