//Base style for footer layouts
.footer-layout {
  .footer {
    color: $white;
    line-height: 1.35;

    &__socials {
      margin-left: -( $spacing-xs );

      .socials__item {
        padding: 0;
        vertical-align: middle;

        img {
          height: 28px;
          vertical-align: middle;
        }
      }
      
      a {
        display: block;
        padding: $spacing-xs;
      }
    }

    &__contact {
      p {
        margin-bottom: 0;
      }

      span {
        display: block;
        padding-bottom: $spacing-sm;

        @include desktop() {
          display: inline;
          padding: 0;
          margin-left: $spacing;
          &:first-child {
            margin-left: 0;
          }
        }

        &:last-child {
          padding: 0;
        }
      }
    }

    &__auxiliary,
    &__utility,
    &__nav {
      display: inline-block;
      margin-left: -( $spacing-xs );

      .menu-item {
        display: inline-block;

        a {
          display: block;
          color: $white;
          padding: $spacing-xs;
          &:hover,
          &:focus {
            text-decoration: none;
          }
        }
      }

      @include tablet() {
        display: inline-block;
      }
    }

    &__nav,
    &__utility {
      padding-bottom: $spacing;

      .menu-item {
        display: block;

        @include tablet() {
          display: inline-block;
        }
      }
    }

    &__nav {
      display: block;
    }

    &__menu {
      .nav {
        margin-left: -1rem;
      }

      a {
        color: $white;
        padding: $spacing-sm;
        
        &:hover,
        &:focus {
          text-decoration: none;
        }
      }
    }

    &__copyright {
      font-size: 0.8rem;
      font-weight: 300;

      &--text {
        display: block;
        padding-bottom: $spacing-sm;

        @include desktop() {
          display: inline-block;
          padding-right: $spacing;
        }
      }

      p {
        padding: 0;
        margin: 0;
      }

      @include desktop() {
        text-align: left;

        p {
          padding-bottom: 0;
          margin-bottom: 0;
        }
      }
    }

    &__logo {

      @include desktop {
        text-align: right;
      }

    }

    &__top {
      padding: $spacing $spacing-sm;
    }

    &__main {
      min-height: $spacing;
      padding: $spacing $spacing-sm;
    }

    &__bottom {
      min-height: $spacing;
      padding: $spacing $spacing-sm;
      text-align: center;

      @include tablet() {
        text-align: left;
      }
    ;

      .footer__logo {
        @include tablet() {
          text-align: right;
        }
      }
    }

    &__flex {
      &--sidebar {
        margin: 0 (-$spacing);

        &.content-centered {
          text-align: center;
        }

        &.content-right {
          text-align: right;
        }

        @include tablet {
          display: flex;
          flex-flow: wrap;
          justify-content: space-between;
        }

        .footer__sidebar {
          padding: $spacing;
          box-sizing: border-box;

          @include tablet() {
            flex: 1 1 50%;
          }

          @include desktop() {
            flex: 1 1 33.333%;
          }

          p {
            margin-bottom: 10px;
          }
        }
      }
    }

    .list-inline {
      margin-bottom: -6px;
    }

  }
}
