$footer-bg: $black !default;
$footer-border-color: $border-color-dark !default;
$footer-color: $white !default;
$footer-title-color: $text-muted !default;

.footer {
   background: $footer-bg;
   color: $footer-color;
   padding-top: 105px;

   h5,
   .title-default {
      color: $footer-title-color;
      margin-bottom: 20px;
   }
}

.footer-inner {
   display: flex;
   position: relative;

   .social-links {
      position: absolute;
      top: 0;
      right: 0;

      a {
         transition: all $transition-speed;

         @include haf {
            color: $footer-title-color;
         }
      }
   }
}


.footer-content {
   width: 25%;

   a {
      font-weight: $font-weight-bold;
      font-size: $font-size-h3;
      color: $white;
   }
}

.footer-menu {
   display: flex;
   flex: 1;

   .column {
      width: percentage(calc(1 / 3));
   }

   li {
      margin-bottom: 8px;
   }

   a {
      @include underline-hover;

      font-weight: $font-weight-medium;
      color: $white;
   }
}

@media screen and (max-width: $xl - 1) {
   .footer {
      padding-top: 60px;
   }
}

@media screen and (max-width: $lg - 1) {
   .footer {
      padding-top: 20px;
   }

   .footer-inner {
      flex-wrap: wrap;

      .social-links {
         position: initial;
         top: unset;
         right: unset;
         width: 100%;
         justify-content: center;
         padding-top: 25px;
      }
   }

   .footer-content {
      &,
      > div:not(.w-text) {
         width: 100%;
         display: flex;
      }

      .w-text {
         width: 50%;
      }
   }

   .footer-menu {
      flex-wrap: wrap;

      .column {
         width: calc(100% + (#{$grid-gutter-width} * 3));
         border-top: 1px solid $footer-border-color;
         padding: 20px $grid-gutter-width*1.5;
         margin: 0 (-$grid-gutter-width*1.5);

         &:last-child {
            border-bottom: 1px solid $footer-border-color;
         }
      }

      .title-default {
         display: flex;
         align-items: center;
         justify-content: space-between;
         color: $footer-color;
         font-weight: $font-weight-bold;
         font-size: $font-size-h3;
         margin: 0;
         cursor: pointer;

         &::after {
            @include fonticon;

            content: $icons_arrow-down;
            transition: transform $transition-speed;
         }

         &.is-open::after {
            transform: rotate(-180deg);
         }
      }

      ul {
         display: none;
         padding-top: 12px;
      }

      li {
         margin-bottom: 0;
         margin-top: 8px;
      }
   }
}

@media screen and (max-width: $md - 1) {
   .footer-menu {
      .column {
         width: calc(100% + (#{$grid-gutter-width} * 2));
         padding: 20px $grid-gutter-width;
         margin: 0 (-$grid-gutter-width);
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .footer-content {
      &,
      > div:not(.w-text) {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
      }

      .w-text {
         width: 100%;

         + .w-text {
            border-top: 1px solid $footer-border-color;
            width: calc(100% + (#{$grid-gutter-width} * 2));
            margin: 0 (-$grid-gutter-width);
            padding: 20px $grid-gutter-width 0;
         }
      }

      h5 {
         margin: 0;
      }
   }
}
