/* Legacy Default Footer Styles
----------------------------------------------- */
.footer-layout-default {
  .footer {
      padding: 30px 0;
      color: $white;
      background: $mine-shaft;

      &.text--dark {
          color: $mine-shaft;

          .icon {
              fill: $mine-shaft;
          }
      }

      a {
          color: $white;
      }

      &__nav {
          margin-bottom: 45px;
          text-align: center;

          li {
              display: block;
              margin: 20px 0;

              @include tablet() {
                  margin: 0 20px 0 0;
                  display: inline-block;
              }
          }

          a {
              display: block;
          }

          @include tablet() {
              text-align: left;
              margin-bottom: 15px;
          }
      }

      &__bottom {
          display: flex;
          align-items: center;
          flex-flow: row wrap;
          text-align: center;
      }

      &__copyright {
          display: inline-block;
          order: 2;
          flex: 1 100%;
          margin: 20px 0 0;
          font-size: 14px;

          &--text {
            display: inline-block;
            margin-right: 20px;
          }

          @include tablet() {
              text-align: left;
              flex: 1;
              order: 1;
              margin: 0 0;
          }
      }

      &__logo {
          order: 0;
          width: 100%;
          text-align: center;
          margin-bottom: 15px;
          display: block;

          @include tablet() {
              width: auto;
              margin-bottom: 0;
              order: 2;
          }

          img {
              margin: 0 auto;
              max-height: 48px;
              width: auto;
              display: block;
          }
      }

      &__utility {
          text-align: center;
          margin-bottom: 30px;

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

              li {
                  display: inline-block;
                  margin: 0 20px 0 0;
              }
          }
      }

      &__auxiliary {
        text-align: center;

        @include tablet() {
            text-align: left;
            display: inline-block;

            li {
                display: inline-block;
                margin: 0 20px 0 0;
            }
        }
      }

      &__socials {
          display: inline-block;
          order: 1;
          flex: 1 100%;

          @include tablet() {
              text-align: right;
              flex: 1;
              order: 2;
          }

          a:hover {
              .icon {
                  fill: $white;
              }
          }
      }

      &__flex {
          &--sidebar {
              margin: 0 -15px 45px;

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

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

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

              .footer__sidebar {
                  padding: 0 15px;

                  @include tablet {
                      flex: 1;
                  }

                  p {
                      margin-bottom: 10px;
                      font-size: 13px;
                  }

                  strong,
                  b {
                      font-weight: bold;
                      font-size: rem-calc(22);
                  }

                  em {
                      font-weight: bold;
                  }
              }
          }
      }
  }
}

.footer__scroll-top {
    background: $gallery;
    text-align: center;

    a {
        cursor: pointer;
        display: block;
        padding: 60px 30px;
        font-size: rem-calc(18);
    }

    .icon {
        background-color: currentColor;
        border-radius: 50%;
        display: inline-block;
        fill: $gallery;
        height: 20px;
        margin-right: 10px;
        position: relative;
        top: 4px;
        width: 20px;
    }

    @include tablet() {
        display: none;
    }
}
