@import 'sign-up';
@import '../components/input-messages';
@import '../components/payments-v2';
@import '../helpers/mixins';

.footer {
  &-nav {
    width: 100%;
    padding-top: 32px;
    padding-bottom: 32px;

    &__inner {
      margin: 0 auto;
    }

    .accordion {
      border-top: 1px dashed;
      border-bottom: 0;
      padding: 12px 24px;

      &:hover {
        border-bottom: 0;
      }

      &:last-child {
        border-bottom: 1px dashed;
      }

      &__header,
      &__content {
        padding: 0;
      }

      &__content {
        display: none;

        &-inner {
          padding: 8px 12px 4px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .footer-nav__item {
            padding-bottom: 0;
            margin-bottom: 0;
            list-style-type: none;
            line-height: 1.375rem;

            & + .footer-nav__item {
              margin-top: 4px;
            }
          }
        }
      }

      &__header {
        pointer-events: unset;
        margin-bottom: 0;
        text-align: left;
        position: relative;
        color: $gray-dark;
        font-weight: 500;

        &-text {
          letter-spacing: .15px;
          position: relative;
          bottom: 0;
          font-size: 1rem;
          font-weight: 500;
          line-height: 1.5rem;
        }

        &-icon {
          display: none;
          top: 0;
          position: relative;
          font-size: 1rem;
        }

        &::after {
          content: '+';
          font-weight: 700;
          display: inline-block;
          position: absolute;
          right: 0;
          color: $gray-dark;
        }
      }

      &.accordion_collapsed {
        .accordion__header::after {
          content: '-';
        }
      }
    }

    &__link {
      @include footer-link;
    }
  }

  &-bottom {
    background: $blue-dark;
    color: $white;
    padding: 24px 0;

    &__wrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    &__copyright {
      font-size: .75rem;
      display: flex;
      flex-direction: column;
      line-height: 1rem;
      padding: 0;

      .footer-copyright {
        font-weight: 700;
      }

      .address-line2 {
        white-space: nowrap;
      }

      .company-info-wrapper {
        display: flex;
        flex-direction: column;
      }

      .return-refunds {
        color: $white;
        margin-top: 8px;
      }
    }
  }
}

.socials-media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 100%;

  &__list {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin-bottom: 16px;
    padding-left: 0;
  }

  &__item {
    & + .socials-media__item {
      margin-left: 12px;
    }
  }

  &__img {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 20px;
      height: 20px;
    }
  }
}

.checkout-footer {
  .footer-nav {
    padding: 24px 0;
    border-top: 1px solid $gray-light;
  }

  .payways {
    padding-bottom: 0;
  }
}

body {
  &.payment-details,
  &.order-confirmation,
  &.checkout-summary,
  &.page_empty-basket,
  &.pageLabel-mergeCarts {
    .checkout-footer .footer-nav {
      display: none;
    }
  }
}

@include media-breakpoint-up(sm) {
  .footer {
    &-bottom {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;

      &__copyright {
        .company-info-wrapper {
          flex-direction: row;
        }

        .registration {
          &:after {
            content: '|';
            padding: 0 6px;
          }
        }

        .return-refunds {
          margin-top: 0;

          &:before {
            content: '|';
            padding: 0 6px;
          }
        }
      }
    }
  }

  .socials-media {
    flex-direction: row;
    align-items: center;
    flex: 1 0 100%;
  }

  .checkout-footer {
    .footer-nav {
      padding: 16px 0;
    }
  }
}

@include media-breakpoint-only(sm) {
  .socials-media__item {
    & + .socials-media__item {
      margin-left: 16px;
    }
  }
}

@include media-breakpoint-up(md) {
  .footer-bottom {
    padding-top: 16px;
    padding-bottom: 16px;

    &__wrapper {
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
    }
  }

  .socials-media {
    flex: none;
    order: 2;

    &__list {
      margin-bottom: 0;
    }
  }
}

@include media-breakpoint-up(lg) {
  .footer-nav {
    &__inner {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .accordion {
      border: 0 !important;
      padding: 0;

      &__content {
        display: block;

        &-inner {
          padding: 8px 0 0;
        }
      }

      &__header {
        pointer-events: none;

        &::after {
          content: '';
          display: none;
        }
      }

      &.accordion_collapsed {
        .accordion__header::after {
          content: '';
        }
      }
    }
  }

  .checkout-footer .footer-nav {
    display: none;
  }

  .footer-bottom__copyright {
    display: inline;

    .footer-copyright {
      &:after {
        content: '|';
        padding: 0 6px;
      }
    }

    .address-wrapper {
      display: inline;
    }
  }
}