bulma/sass/components/navbar.scss

@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/derived-variables" as dv;
@use "../utilities/extends";
@use "../utilities/mixins" as mx;

$navbar-background-color: cv.getVar("scheme-main") !default;
$navbar-box-shadow-size: 0 0.125em 0 0 !default;
$navbar-box-shadow-color: cv.getVar("background") !default;
$navbar-height: 3.25rem !default;
$navbar-padding-vertical: 1rem !default;
$navbar-padding-horizontal: 2rem !default;
$navbar-z: 30 !default;
$navbar-fixed-z: 30 !default;

$navbar-item-background-color: cv.getVar("scheme-main") !default;
$navbar-item-background-a: 0 !default;
$navbar-item-color: cv.getVar("text") !default;
$navbar-item-hover-background-color: hsl(
  from #{cv.getVar("navbar-item-background-color")} h s calc(l + #{cv.getVar(
          "hover-background-l-delta"
        )})
) !default;
$navbar-item-hover-color: cv.getVar("text-strong") !default;
$navbar-item-active-background-color: hsl(
  from #{cv.getVar("navbar-item-background-color")} h s calc(l + #{cv.getVar(
          "active-background-l-delta"
        )})
) !default;
$navbar-item-active-color: cv.getVar("text-strong") !default;
$navbar-item-selected-background-color: cv.getVar("link") !default;
$navbar-item-selected-color: cv.getVar("link-invert") !default;
$navbar-item-selected-hover-background-color: hsl(
  from #{cv.getVar("navbar-item-selected-background-color")} h s calc(l + #{cv.getVar(
          "hover-background-l-delta"
        )})
) !default;
$navbar-item-selected-active-background-color: hsl(
  from #{cv.getVar("navbar-item-selected-background-color")} h s calc(l + #{cv.getVar(
          "active-background-l-delta"
        )})
) !default;
$navbar-item-img-max-height: 1.75rem !default;

$navbar-burger-color: cv.getVar("link") !default;

$navbar-tab-hover-background-color: transparent !default;
$navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
$navbar-tab-active-color: cv.getVar("link") !default;
$navbar-tab-active-background-color: transparent !default;
$navbar-tab-active-border-bottom-color: cv.getVar("link") !default;
$navbar-tab-active-border-bottom-style: solid !default;
$navbar-tab-active-border-bottom-width: 0.1875em !default;

$navbar-dropdown-background-color: cv.getVar("scheme-main") !default;
$navbar-dropdown-border-color: cv.getVar("border") !default;
$navbar-dropdown-border-style: solid !default;
$navbar-dropdown-border-width: 0.125em !default;
$navbar-dropdown-offset: -0.25em !default;
$navbar-dropdown-arrow: cv.getVar("link") !default;
$navbar-dropdown-radius: cv.getVar("radius-large") !default;
$navbar-dropdown-z: 20 !default;

$navbar-dropdown-item-background-color: cv.getVar("scheme-main") !default;
$navbar-dropdown-item-color: cv.getVar("text") !default;
$navbar-dropdown-item-hover-background-color: hsl(
  from #{cv.getVar("navbar-dropdown-item-background-color")} h s calc(l + #{cv.getVar(
          "hover-background-l-delta"
        )})
) !default;
$navbar-dropdown-item-active-background-color: hsl(
  from #{cv.getVar("navbar-dropdown-item-background-color")} h s calc(l + #{cv.getVar(
          "active-background-l-delta"
        )})
) !default;

$navbar-dropdown-boxed-radius: cv.getVar("radius-large") !default;
$navbar-dropdown-boxed-shadow:
  0 0.5em 0.5em
    hsla(
      #{cv.getVar("scheme-h")},
      #{cv.getVar("scheme-s")},
      #{cv.getVar("scheme-invert-l")},
      0.1
    ),
  0 0 0 1px
    hsla(
      #{cv.getVar("scheme-h")},
      #{cv.getVar("scheme-s")},
      #{cv.getVar("scheme-invert-l")},
      0.1
    ) !default;

$navbar-divider-background-color: cv.getVar("background") !default;
$navbar-divider-height: 0.125em !default;

$navbar-bottom-box-shadow-size: 0 -0.125em 0 0 !default;

$navbar-breakpoint: iv.$desktop !default;

$navbar-colors: dv.$colors !default;

@mixin navbar-fixed {
  left: 0;
  position: fixed;
  right: 0;
  z-index: cv.getVar("navbar-fixed-z");
}

:root {
  @include cv.register-vars(
    (
      "navbar-height": #{$navbar-height},
    )
  );
}

.#{iv.$class-prefix}navbar {
  @include cv.register-vars(
    (
      "navbar-background-color": #{$navbar-background-color},
      "navbar-box-shadow-size": #{$navbar-box-shadow-size},
      "navbar-box-shadow-color": #{$navbar-box-shadow-color},
      "navbar-padding-vertical": #{$navbar-padding-vertical},
      "navbar-padding-horizontal": #{$navbar-padding-horizontal},
      "navbar-z": #{$navbar-z},
      "navbar-fixed-z": #{$navbar-fixed-z},
      "navbar-item-background-color": #{$navbar-item-background-color},
      "navbar-item-background-a": #{$navbar-item-background-a},
      "navbar-item-color": #{$navbar-item-color},
      "navbar-item-hover-background-color": #{$navbar-item-hover-background-color},
      "navbar-item-hover-color": #{$navbar-item-hover-color},
      "navbar-item-active-background-color": #{$navbar-item-active-background-color},
      "navbar-item-active-color": #{$navbar-item-active-color},
      "navbar-item-selected-background-color": #{$navbar-item-selected-background-color},
      "navbar-item-selected-color": #{$navbar-item-selected-color},
      "navbar-item-selected-hover-background-color": #{$navbar-item-selected-hover-background-color},
      "navbar-item-selected-active-background-color": #{$navbar-item-selected-active-background-color},
      "navbar-item-img-max-height": #{$navbar-item-img-max-height},
      "navbar-burger-color": #{$navbar-burger-color},
      "navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color},
      "navbar-tab-hover-border-bottom-color": #{$navbar-tab-hover-border-bottom-color},
      "navbar-tab-active-color": #{$navbar-tab-active-color},
      "navbar-tab-active-background-color": #{$navbar-tab-active-background-color},
      "navbar-tab-active-border-bottom-color": #{$navbar-tab-active-border-bottom-color},
      "navbar-tab-active-border-bottom-style": #{$navbar-tab-active-border-bottom-style},
      "navbar-tab-active-border-bottom-width": #{$navbar-tab-active-border-bottom-width},
      "navbar-dropdown-background-color": #{$navbar-dropdown-background-color},
      "navbar-dropdown-border-color": #{$navbar-dropdown-border-color},
      "navbar-dropdown-border-style": #{$navbar-dropdown-border-style},
      "navbar-dropdown-border-width": #{$navbar-dropdown-border-width},
      "navbar-dropdown-offset": #{$navbar-dropdown-offset},
      "navbar-dropdown-arrow": #{$navbar-dropdown-arrow},
      "navbar-dropdown-radius": #{$navbar-dropdown-radius},
      "navbar-dropdown-z": #{$navbar-dropdown-z},
      "navbar-dropdown-item-background-color": #{$navbar-dropdown-item-background-color},
      "navbar-dropdown-item-color": #{$navbar-dropdown-item-color},
      "navbar-dropdown-item-hover-background-color": #{$navbar-dropdown-item-hover-background-color},
      "navbar-dropdown-item-active-background-color": #{$navbar-dropdown-item-active-background-color},
      "navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius},
      "navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow},
      "navbar-divider-background-color": #{$navbar-divider-background-color},
      "navbar-divider-height": #{$navbar-divider-height},
      "navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size},
    )
  );
}

.#{iv.$class-prefix}navbar {
  background-color: cv.getVar("navbar-background-color");
  min-height: cv.getVar("navbar-height");
  position: relative;
  z-index: cv.getVar("navbar-z");

  @each $name, $pair in $navbar-colors {
    &.#{iv.$class-prefix}is-#{$name} {
      @include cv.register-vars(
        (
          "navbar-background-color": #{cv.getVar($name)},
          "navbar-item-background-color": #{cv.getVar($name)},
          "navbar-item-color": #{cv.getVar($name, "", "-invert")},
          "navbar-item-hover-color": #{cv.getVar($name, "", "-invert")},
          "navbar-item-active-color": #{cv.getVar($name, "", "-invert")},
          "navbar-item-selected-background-color": #{cv.getVar($name)},
          "navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert")},
          "navbar-dropdown-item-color": #{cv.getVar($name, "", "-on-scheme")},
        )
      );

      .#{iv.$class-prefix}navbar-dropdown {
        .#{iv.$class-prefix}navbar-item {
          &:not(.is-active, .is-selected) {
            background-color: hsl(
              from cv.getVar("navbar-dropdown-item-background-color")
                cv.getVar($name, "", "-h")
                cv.getVar($name, "", "-s")
                l
            );

            &:hover {
              background-color: hsl(
                from cv.getVar("navbar-dropdown-item-hover-background-color")
                  cv.getVar($name, "", "-h")
                  cv.getVar($name, "", "-s")
                  l
              );
            }

            &:active {
              background-color: hsl(
                from cv.getVar("navbar-dropdown-item-active-background-color")
                  cv.getVar($name, "", "-h")
                  cv.getVar($name, "", "-s")
                  l
              );
            }
          }
        }
      }
    }
  }

  & > .#{iv.$class-prefix}container {
    align-items: stretch;
    display: flex;
    min-height: cv.getVar("navbar-height");
    width: 100%;
  }

  &.#{iv.$class-prefix}has-shadow {
    box-shadow: cv.getVar("navbar-box-shadow-size")
      cv.getVar("navbar-box-shadow-color");
  }

  &.#{iv.$class-prefix}is-fixed-bottom,
  &.#{iv.$class-prefix}is-fixed-top {
    @include navbar-fixed;
  }

  &.#{iv.$class-prefix}is-fixed-bottom {
    bottom: 0;

    &.#{iv.$class-prefix}has-shadow {
      box-shadow: cv.getVar("navbar-bottom-box-shadow-size")
        cv.getVar("navbar-box-shadow-color");
    }
  }

  &.#{iv.$class-prefix}is-fixed-top {
    top: 0;
  }
}

html,
body {
  &.#{iv.$class-prefix}has-navbar-fixed-top {
    padding-top: cv.getVar("navbar-height");
  }

  &.#{iv.$class-prefix}has-navbar-fixed-bottom {
    padding-bottom: cv.getVar("navbar-height");
  }
}

.#{iv.$class-prefix}navbar-brand,
.#{iv.$class-prefix}navbar-tabs {
  align-items: stretch;
  display: flex;
  flex-shrink: 0;
  min-height: cv.getVar("navbar-height");
}

.#{iv.$class-prefix}navbar-tabs {
  @include mx.overflow-touch;
  max-width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
}

.#{iv.$class-prefix}navbar-burger {
  @extend %reset;
  @include mx.burger(2.5rem);

  & {
    align-self: center;
    color: cv.getVar("navbar-burger-color");
    margin-inline-start: auto;
    margin-inline-end: 0.375rem;
  }
}

.#{iv.$class-prefix}navbar-menu {
  display: none;
}

.#{iv.$class-prefix}navbar-item,
.#{iv.$class-prefix}navbar-link {
  color: cv.getVar("navbar-item-color");
  display: block;
  gap: 0.75rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  position: relative;

  .#{iv.$class-prefix}icon {
    &:only-child {
      margin-left: -0.25rem;
      margin-right: -0.25rem;
    }
  }
}

a.#{iv.$class-prefix}navbar-item,
.#{iv.$class-prefix}navbar-link {
  background-color: cv.getVar("navbar-item-background-color");
  cursor: pointer;

  &:focus,
  &:focus-within,
  &:hover {
    background-color: cv.getVar("navbar-item-hover-background-color");
    color: cv.getVar("navbar-item-hover-color");
  }

  &:active {
    background-color: cv.getVar("navbar-item-active-background-color");
    color: cv.getVar("navbar-item-active-color");
  }

  &.#{iv.$class-prefix}is-active,
  &.#{iv.$class-prefix}is-selected {
    background-color: cv.getVar("navbar-item-selected-background-color");
    color: cv.getVar("navbar-item-selected-color");

    &:hover {
      background-color: cv.getVar(
        "navbar-item-selected-hover-background-color"
      );
    }

    &:active {
      background-color: cv.getVar(
        "navbar-item-selected-active-background-color"
      );
    }
  }
}

.#{iv.$class-prefix}navbar-item {
  flex-grow: 0;
  flex-shrink: 0;

  img,
  svg {
    max-height: cv.getVar("navbar-item-img-max-height");
  }

  &.#{iv.$class-prefix}has-dropdown {
    padding: 0;
  }

  &.#{iv.$class-prefix}is-expanded {
    flex-grow: 1;
    flex-shrink: 1;
  }

  &.#{iv.$class-prefix}is-tab {
    border-bottom: 1px solid transparent;
    min-height: cv.getVar("navbar-height");
    padding-bottom: calc(0.5rem - 1px);

    &:focus,
    &:hover {
      background-color: cv.getVar("navbar-tab-hover-background-color");
      border-bottom-color: cv.getVar("navbar-tab-hover-border-bottom-color");
    }

    &.#{iv.$class-prefix}is-active {
      background-color: cv.getVar("navbar-tab-active-background-color");
      border-bottom-color: cv.getVar("navbar-tab-active-border-bottom-color");
      border-bottom-style: cv.getVar("navbar-tab-active-border-bottom-style");
      border-bottom-width: cv.getVar("navbar-tab-active-border-bottom-width");
      color: cv.getVar("navbar-tab-active-color");
      padding-bottom: calc(
        0.5rem - #{cv.getVar("navbar-tab-active-border-bottom-width")}
      );
    }
  }
}

.#{iv.$class-prefix}navbar-content {
  flex-grow: 1;
  flex-shrink: 1;
}

.#{iv.$class-prefix}navbar-link:not(.#{iv.$class-prefix}is-arrowless) {
  padding-inline-end: 2.5em;

  &::after {
    @extend %arrow;
    border-color: cv.getVar("navbar-dropdown-arrow");
    margin-top: -0.375em;
    inset-inline-end: 1.125em;
  }
}

.#{iv.$class-prefix}navbar-dropdown {
  font-size: 0.875rem;
  padding-bottom: 0.75rem;
  padding-top: 0.5rem;

  .#{iv.$class-prefix}navbar-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    &:not(.is-active, .is-selected) {
      background-color: cv.getVar("navbar-dropdown-item-background-color");
      color: cv.getVar("navbar-dropdown-item-color");

      &:hover {
        background-color: cv.getVar(
          "navbar-dropdown-item-hover-background-color"
        );
      }

      &:active {
        background-color: cv.getVar(
          "navbar-dropdown-item-active-background-color"
        );
      }
    }
  }
}

.#{iv.$class-prefix}navbar-divider {
  background-color: cv.getVar("navbar-divider-background-color");
  border: none;
  display: none;
  height: cv.getVar("navbar-divider-height");
  margin: 0.5rem 0;
}

@include mx.until($navbar-breakpoint) {
  .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container {
    display: block;
  }

  .#{iv.$class-prefix}navbar-brand,
  .#{iv.$class-prefix}navbar-tabs {
    .#{iv.$class-prefix}navbar-item {
      align-items: center;
      display: flex;
    }
  }

  .#{iv.$class-prefix}navbar-link {
    &::after {
      display: none;
    }
  }

  .#{iv.$class-prefix}navbar-menu {
    background-color: cv.getVar("navbar-background-color");
    box-shadow: 0 0.5em 1em
      hsla(
        #{cv.getVar("scheme-h")},
        #{cv.getVar("scheme-s")},
        #{cv.getVar("scheme-invert-l")},
        0.1
      );
    padding: 0.5rem 0;

    &.#{iv.$class-prefix}is-active {
      display: block;
    }
  }

  // Fixed navbar
  .#{iv.$class-prefix}navbar {
    &.#{iv.$class-prefix}is-fixed-bottom-touch,
    &.#{iv.$class-prefix}is-fixed-top-touch {
      @include navbar-fixed;
    }

    &.#{iv.$class-prefix}is-fixed-bottom-touch {
      bottom: 0;

      &.#{iv.$class-prefix}has-shadow {
        box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
                "scheme-s"
              )}, #{cv.getVar("scheme-invert-l")}, 0.1);
      }
    }

    &.#{iv.$class-prefix}is-fixed-top-touch {
      top: 0;
    }

    &.#{iv.$class-prefix}is-fixed-top,
    &.#{iv.$class-prefix}is-fixed-top-touch {
      .#{iv.$class-prefix}navbar-menu {
        @include mx.overflow-touch;
        max-height: calc(100vh - #{cv.getVar("navbar-height")});
        overflow: auto;
      }
    }
  }

  html,
  body {
    &.#{iv.$class-prefix}has-navbar-fixed-top-touch {
      padding-top: cv.getVar("navbar-height");
    }

    &.#{iv.$class-prefix}has-navbar-fixed-bottom-touch {
      padding-bottom: cv.getVar("navbar-height");
    }
  }
}

@include mx.from($navbar-breakpoint) {
  .#{iv.$class-prefix}navbar,
  .#{iv.$class-prefix}navbar-menu,
  .#{iv.$class-prefix}navbar-start,
  .#{iv.$class-prefix}navbar-end {
    align-items: stretch;
    display: flex;
  }

  .#{iv.$class-prefix}navbar {
    min-height: cv.getVar("navbar-height");

    &.#{iv.$class-prefix}is-spaced {
      padding: cv.getVar("navbar-padding-vertical")
        cv.getVar("navbar-padding-horizontal");

      .#{iv.$class-prefix}navbar-start,
      .#{iv.$class-prefix}navbar-end {
        align-items: center;
      }

      a.#{iv.$class-prefix}navbar-item,
      .#{iv.$class-prefix}navbar-link {
        border-radius: cv.getVar("radius");
      }
    }

    &.#{iv.$class-prefix}is-transparent {
      @include cv.register-vars(
        (
          "navbar-item-background-a": 0,
        )
      );

      .#{iv.$class-prefix}navbar-dropdown {
        a.#{iv.$class-prefix}navbar-item {
          // background-color: hsl(
          //   #{cv.getVar("navbar-h")},
          //   #{cv.getVar("navbar-s")},
          //   calc(
          //     #{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
          //         "navbar-item-background-l-delta"
          //       )}
          //   )
          // );

          &.#{iv.$class-prefix}is-active,
          &.#{iv.$class-prefix}is-selected {
            // @include cv.register-vars(
            //   (
            //     "navbar-h": #{cv.getVar("navbar-item-selected-h")},
            //     "navbar-s": #{cv.getVar("navbar-item-selected-s")},
            //     "navbar-l": #{cv.getVar("navbar-item-selected-l")},
            //     "navbar-item-background-l": #{cv.getVar(
            //         "navbar-item-selected-background-l"
            //       )},
            //     "navbar-item-color-l": #{cv.getVar(
            //         "navbar-item-selected-color-l"
            //       )},
            //   )
            // );
          }
        }
      }
    }
  }

  .#{iv.$class-prefix}navbar-burger {
    display: none;
  }

  .#{iv.$class-prefix}navbar-item,
  .#{iv.$class-prefix}navbar-link {
    align-items: center;
    display: flex;
  }

  .#{iv.$class-prefix}navbar-item {
    &.#{iv.$class-prefix}has-dropdown {
      align-items: stretch;
    }

    &.#{iv.$class-prefix}has-dropdown-up {
      .#{iv.$class-prefix}navbar-link::after {
        transform: rotate(135deg) translate(0.25em, -0.25em);
      }

      .#{iv.$class-prefix}navbar-dropdown {
        border-bottom-color: cv.getVar("navbar-dropdown-border-color");
        border-bottom-style: cv.getVar("navbar-dropdown-border-style");
        border-bottom-width: cv.getVar("navbar-dropdown-border-width");
        border-radius: cv.getVar("navbar-dropdown-radius")
          cv.getVar("navbar-dropdown-radius") 0 0;
        border-top: none;
        bottom: 100%;
        box-shadow: 0 -0.5em 0.5em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
                "scheme-s"
              )}, #{cv.getVar("scheme-invert-l")}, 0.1);
        top: auto;
      }
    }

    &.#{iv.$class-prefix}is-active,
    &.#{iv.$class-prefix}is-hoverable:focus,
    &.#{iv.$class-prefix}is-hoverable:focus-within,
    &.#{iv.$class-prefix}is-hoverable:hover {
      .#{iv.$class-prefix}navbar-dropdown {
        display: block;

        .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
        &.#{iv.$class-prefix}is-boxed {
          opacity: 1;
          pointer-events: auto;
          transform: translateY(0);
        }
      }
    }
  }

  .#{iv.$class-prefix}navbar-menu {
    flex-grow: 1;
    flex-shrink: 0;
  }

  .#{iv.$class-prefix}navbar-start {
    justify-content: flex-start;
    margin-inline-end: auto;
  }

  .#{iv.$class-prefix}navbar-end {
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .#{iv.$class-prefix}navbar-dropdown {
    background-color: cv.getVar("navbar-dropdown-background-color");
    border-end-start-radius: cv.getVar("navbar-dropdown-radius");
    border-end-end-radius: cv.getVar("navbar-dropdown-radius");
    border-top-color: cv.getVar("navbar-dropdown-border-color");
    border-top-style: cv.getVar("navbar-dropdown-border-style");
    border-top-width: cv.getVar("navbar-dropdown-border-width");
    box-shadow: 0 0.5em 0.5em
      hsla(
        #{cv.getVar("scheme-h")},
        #{cv.getVar("scheme-s")},
        #{cv.getVar("scheme-invert-l")},
        0.1
      );
    display: none;
    font-size: 0.875rem;
    inset-inline-start: 0;
    min-width: 100%;
    position: absolute;
    top: 100%;
    z-index: cv.getVar("navbar-dropdown-z");

    .#{iv.$class-prefix}navbar-item {
      padding: 0.375rem 1rem;
      white-space: nowrap;
    }

    a.#{iv.$class-prefix}navbar-item {
      padding-inline-end: 3rem;
    }

    .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
    &.#{iv.$class-prefix}is-boxed {
      border-radius: cv.getVar("navbar-dropdown-boxed-radius");
      border-top: none;
      box-shadow: cv.getVar("navbar-dropdown-boxed-shadow");
      display: block;
      opacity: 0;
      pointer-events: none;
      top: calc(100% + (#{cv.getVar("navbar-dropdown-offset")}));
      transform: translateY(-5px);
      transition-duration: cv.getVar("duration");
      transition-property: opacity, transform;
    }

    &.#{iv.$class-prefix}is-right {
      left: auto;
      right: 0;
    }
  }

  .#{iv.$class-prefix}navbar-divider {
    display: block;
  }

  .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container,
  .#{iv.$class-prefix}container > .#{iv.$class-prefix}navbar {
    .#{iv.$class-prefix}navbar-brand {
      margin-inline-start: -0.75rem;
    }

    .#{iv.$class-prefix}navbar-menu {
      margin-inline-end: -0.75rem;
    }
  }

  // Fixed navbar
  .#{iv.$class-prefix}navbar {
    &.#{iv.$class-prefix}is-fixed-bottom-desktop,
    &.#{iv.$class-prefix}is-fixed-top-desktop {
      @include navbar-fixed;
    }

    &.#{iv.$class-prefix}is-fixed-bottom-desktop {
      bottom: 0;

      &.#{iv.$class-prefix}has-shadow {
        box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
                "scheme-s"
              )}, #{cv.getVar("scheme-invert-l")}, 0.1);
      }
    }

    &.#{iv.$class-prefix}is-fixed-top-desktop {
      top: 0;
    }
  }

  html,
  body {
    &.#{iv.$class-prefix}has-navbar-fixed-top-desktop {
      padding-top: cv.getVar("navbar-height");
    }

    &.#{iv.$class-prefix}has-navbar-fixed-bottom-desktop {
      padding-bottom: cv.getVar("navbar-height");
    }

    &.#{iv.$class-prefix}has-spaced-navbar-fixed-top {
      padding-top: calc(
        #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
          2
      );
    }

    &.#{iv.$class-prefix}has-spaced-navbar-fixed-bottom {
      padding-bottom: calc(
        #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
          2
      );
    }
  }
}

// Combination

.#{iv.$class-prefix}hero {
  &.#{iv.$class-prefix}is-fullheight-with-navbar {
    min-height: calc(100vh - #{cv.getVar("navbar-height")});
  }
}