@import "../../../styles_vendor";

@mixin showFooterElements() {
  opacity: 0.95;
  .footerElement {
    .footerElemText {
      display: block;
    }
  }
}

#footer-move-left,
#footer-move-right {
  width: 50px;
  height: 50px;
  top: 0;
  color: #fff;
  font-size: 3rem;
  z-index: 1050;
}

#footer-move-left {
  border-right: 1px dashed;
}

#footer-move-right {
  border-left: 1px dashed;
  right: 0;
}

.navbar-footer {
  left: 0;
  z-index: 1040;

  @include media-breakpoint-only(sm) {
    position: absolute;
    max-width: 20vw;

    .footerElement {
      .footerElemText {
        display: none;
      }
    }
    &:hover {
      @include showFooterElements;
    }
  }
  @include media-breakpoint-up(md) {
    opacity: 0.95;
    max-width: 20vw;
  }

  @include media-breakpoint-down(xs) {
    height: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  @include media-breakpoint-up(sm) {
    @include border-right-radius($border-radius);
  }

  .footerElement {
    flex-shrink: 0;

    @include media-breakpoint-down(xs) {
      flex-grow: 1;

      .footerElemText {
        line-height: 40px;
      }
    }
    @include media-breakpoint-up(sm) {
      flex-grow: 0;

      .footerElemText {
        flex-shrink: 0;
        max-width: calc(20vw - 36px);
      }
    }
  }
}
