@import "../variables";

$footer-text-color: $color-white;
$footer-language-color: #ffffffcc;
$footer-link-color: $color-white;
$footer-social-color: $color-white;
$footer-link-hover-color: $color-periwinkle;
$footer-copyline-color: #ffffffcc;
$footer-padding-lr: 30px;
$footer-primary-color: $color-ocean-blue;
$footer-bottom-border: #ffffffcc;
$footer-sides-offset: 50px;

.footer {
  width: 100% !important;
}

.footer-last-column {
  @extend .clear-gutter;
  padding: 0;
  @include media-breakpoint-up(lg) {
    order: 2;
  }
}

.footer-top {
  padding-top: 50px;
  padding-bottom: 50px;
  background: $footer-primary-color;

  @include media-breakpoint-up(md) {
    padding-right: $footer-sides-offset;
    padding-left: $footer-sides-offset;
  }
  @include media-breakpoint-down(sm) {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid $footer-bottom-border;
  background: $footer-primary-color;

  @include media-breakpoint-up(md) {
    padding-right: $footer-sides-offset;
    padding-left: $footer-sides-offset;
  }

}

.footer-bottom-social-light {
  @include media-breakpoint-up(md) {
    height: 50px;
  }
}

.slide-from-right {
  animation: slide-from-right 400ms 1 cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-from-left {
  @include media-breakpoint-down(sm) {
    animation: slide-from-left 400ms 1 cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
}


@keyframes slide-from-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  50% {
    box-shadow: -12px 0px 17px -7px transparentize($color-mineshaft, 0.33);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0%);
    box-shadow: none;
    opacity: 1;
  }
}


@keyframes slide-from-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  50% {
    box-shadow: -12px 0px 17px -7px transparentize($color-mineshaft, 0.33);

    opacity: 0.5;
  }

  100% {
    transform: translateX(100%);
    box-shadow: none;
    opacity: 0;
  }
}