.psv-navbar {
  @include flexbox();
  position: absolute;
  z-index: $navbar-zindex;
  bottom: 0;
  left: 0;
  width: 100%;
  background: $navbar-background;

  // scss-lint:disable UnnecessaryParentReference
  &, & * {
    box-sizing: content-box;
  }

  .psv-caption {
    @include flex-grow(10);
    color: $caption-color;
    margin: $buttons-padding;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    font-family: $caption-font;
  }

  .psv-spacer {
    @for $i from 1 through 10 {
      &.weight-#{$i} {
        @include flex-grow($i);
      }
    }
  }

  .psv-button {
    @include flex-grow(0);
    padding: $buttons-padding;
    position: relative;
    cursor: pointer;
    height: $buttons-height;
    width: $buttons-height;
    background: $buttons-background;
    color: $buttons-color;

    &.active, &.hoverable:hover {
      background: $buttons-active-background;
    }

    svg {
      width: 100%;

      * {
        fill: $buttons-color;
      }
    }
  }
}

@import 'buttons/autorotate';
@import 'buttons/download';
@import 'buttons/fullscreen';
@import 'buttons/zoom';
@import 'buttons/markers';