@import '../helpers/helpers';

.footer-checkout {
  padding: 0;

  &-holder {
    @include make-container-max-widths;
    @include make-container;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: $gray-bg;
    padding: 25px 0;
  }

  .payments {
    margin-bottom: 15px;

    .payments__item {
      margin-right: 10px;
      vertical-align: middle;

      .payments__icons {
        display: block;
        background: url('../../img/payments-sprite.png') no-repeat;
        border-radius: 3px;
        text-indent: -9999px;

        &.payments-mastercard {
          background-position: -110px -9px;
          height: 28px;
          width: 36px;
        }

        &.payments-maestro {
          background-position: -110px -49px;
          height: 33px;
          width: 36px;
          transform: translateY(3px);
        }

        &.payments-visa {
          background-position: -10px -54px;
          height: 22px;
          width: 68px;
        }

        &.payments-paypal {
          background-position: -10px -9px;
          height: 24px;
          width: 80px;
        }
      }
    }
  }

  &__copyright {
    font-size: .75rem;
    line-height: 1rem;
    white-space: nowrap;
  }

  .payments {
    @include make-col-ready;
    @include make-col(12);
  }
}

@include media-breakpoint-up(md) {
  .footer-checkout {
    padding: 0 15px;

    &-holder {
      flex-direction: row;
      justify-content: space-between;
    }

    .payments {
      text-align: left;
      margin-bottom: 0;

      .payments__item {
        margin-right: 25px;
      }
    }

    .payments {
      @include make-col(6);
    }
  }
}