.pp-icon {
	display: inline-block;
	line-height: 1;
	text-align: center;
    transition: all .3s;
}
.pp-icon i,
.pp-icon svg {
    width: 1em;
    height: 1em;
    position: relative;
    display: block;
    transition: all 0.3s;
}
.pp-buttons-group {
	display: flex;
	flex-flow: wrap;
    align-items: flex-start;
	a,
	a:hover {
		text-decoration: none;
		transition: all 0.3s;
	}
	.pp-button {
        display: flex;
	}
}
.pp-button-content-wrapper {
	.pp-button-content-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		&.pp-icon-before {
			flex-direction: row;
		}
		&.pp-icon-after {
			flex-direction: row-reverse;
		}
		&.pp-icon-top {
			flex-direction: column;
		}
		&.pp-icon-bottom {
			flex-direction: column-reverse;
		}
	}
}
.pp-button-icon-image {
	img {
		width: 40px;
	}
}
.pp-button-content-wrapper {
    display: flex;
    flex-grow: 1;
	justify-content: center;
}
.pp-buttons-group {
    .pp-buttons-valign-top & {
        align-items: flex-start;
    }
    .pp-buttons-valign-middle & {
        align-items: center;
    }
    .pp-buttons-valign-bottom & {
        align-items: flex-end;
    }
    .pp-buttons-valign-stretch & {
        align-items: stretch;
        .pp-button-content-wrapper {
            align-items: center;
        }
    }
}
.pp-buttons-halign-left {
    .pp-buttons-group {
        justify-content: flex-start;
    }
}
.pp-buttons-halign-center {
    .pp-buttons-group {
        justify-content: center;
    }
}
.pp-buttons-halign-right {
    .pp-buttons-group {
        justify-content: flex-end;
    }
}
.pp-buttons-halign-stretch {
    .pp-buttons-group {
        justify-content: stretch;
    }
    .pp-button {
        flex-grow : 1;
    }
}
.pp-buttons-stack-desktop {
    .pp-buttons-group {
        flex-direction: column;
    }
    &.pp-buttons-halign-left {
        .pp-buttons-group {
            align-items: flex-start;
        }
    }
    &.pp-buttons-halign-center {
        .pp-buttons-group {
            align-items: center;
        }
    }
    &.pp-buttons-halign-right {
        .pp-buttons-group {
            align-items: flex-end;
        }
    }
    &.pp-buttons-halign-stretch {
        .pp-buttons-group {
            align-items: stretch;
        }
        .pp-button {
            flex-grow : 1;
        }
    }
}

@media (max-width: 1024px) {
    .pp-buttons-group {
        .pp-buttons-valign-tablet-top & {
            align-items: flex-start;
        }
        .pp-buttons-valign-tablet-middle & {
            align-items: center;
        }
        .pp-buttons-valign-tablet-bottom & {
            align-items: flex-end;
        }
        .pp-buttons-valign-tablet-stretch & {
            align-items: stretch;
            .pp-button-content-wrapper {
                align-items: center;
            }
        }
    }
    .pp-buttons-stack-none,
    .pp-buttons-stack-mobile {
        &.pp-buttons-halign-tablet-left {
            .pp-buttons-group {
                justify-content: flex-start;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-tablet-center {
            .pp-buttons-group {
                justify-content: center;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-tablet-right {
            .pp-buttons-group {
                justify-content: flex-end;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-tablet-stretch {
            .pp-buttons-group {
                justify-content: stretch;
            }
            .pp-button {
                flex-grow : 1;
            }
        }
    }
    .pp-buttons-stack-tablet {
        .pp-buttons-group {
            flex-direction: column;
        }
        &.pp-buttons-halign-left {
            .pp-buttons-group {
                align-items: flex-start;
            }
        }
        &.pp-buttons-halign-center {
            .pp-buttons-group {
                align-items: center;
            }
        }
        &.pp-buttons-halign-right {
            .pp-buttons-group {
                align-items: flex-end;
            }
        }
        &.pp-buttons-halign-stretch {
            .pp-buttons-group {
                align-items: stretch;
            }
            .pp-button {
                flex-grow : 1;
            }
        }
    }
    .pp-buttons-stack-desktop,
    .pp-buttons-stack-tablet {
        .pp-buttons-group {
            flex-direction: column;
        }
        &.pp-buttons-halign-tablet-left {
            .pp-buttons-group {
                align-items: flex-start;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-tablet-center {
            .pp-buttons-group {
                align-items: center;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-tablet-right {
            .pp-buttons-group {
                align-items: flex-end;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-tablet-stretch {
            .pp-buttons-group {
                align-items: stretch;
            }
            .pp-button {
                flex-grow : 1;
            }
        }
    }
	.pp-button-content-wrapper {
		.pp-button-content-inner {
			&.pp-icon-before-tablet {
				flex-direction: row;
			}
			&.pp-icon-after-tablet {
				flex-direction: row-reverse;
			}
			&.pp-icon-top-tablet {
				flex-direction: column;
			}
			&.pp-icon-bottom-tablet {
				flex-direction: column-reverse;
			}
		}
	}
}
@media only screen and (max-width: 767px) {
    .pp-buttons-group {
        .pp-buttons-valign-mobile-top & {
            align-items: flex-start;
        }
        .pp-buttons-valign-mobile-middle & {
            align-items: center;
        }
        .pp-buttons-valign-mobile-bottom & {
            align-items: flex-end;
        }
        .pp-buttons-valign-mobile-stretch & {
            align-items: stretch;
            .pp-button-content-wrapper {
                align-items: center;
            }
        }
    }
    .pp-buttons-stack-none {
        &.pp-buttons-halign-mobile-left {
            .pp-buttons-group {
                justify-content: flex-start;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-mobile-center {
            .pp-buttons-group {
                justify-content: center;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-mobile-right {
            .pp-buttons-group {
                justify-content: flex-end;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-mobile-stretch {
            .pp-buttons-group {
                align-items: stretch;
            }
            .pp-button {
                flex-grow : 1;
            }
        }
    }
    .pp-buttons-stack-mobile {
        .pp-buttons-group {
            flex-direction: column;
        }
        &.pp-buttons-halign-left {
            .pp-buttons-group {
                align-items: flex-start;
            }
        }
        &.pp-buttons-halign-center {
            .pp-buttons-group {
                align-items: center;
            }
        }
        &.pp-buttons-halign-right {
            .pp-buttons-group {
                align-items: flex-end;
            }
        }
        &.pp-buttons-halign-stretch {
            .pp-buttons-group {
                align-items: stretch;
            }
            .pp-button {
                flex-grow : 1;
            }
        }
        &.pp-buttons-halign-tablet-left {
            .pp-buttons-group {
                align-items: flex-start;
            }
        }
        &.pp-buttons-halign-tablet-center {
            .pp-buttons-group {
                align-items: center;
            }
        }
        &.pp-buttons-halign-tablet-right {
            .pp-buttons-group {
                align-items: flex-end;
            }
        }
        &.pp-buttons-halign-tablet-stretch {
            .pp-buttons-group {
                align-items: stretch;
            }
            .pp-button {
                flex-grow : 1;
            }
        }
    }
    .pp-buttons-stack-desktop,
    .pp-buttons-stack-tablet,
    .pp-buttons-stack-mobile {
        .pp-buttons-group {
            flex-direction: column;
        }
        &.pp-buttons-halign-mobile-left {
            .pp-buttons-group {
                align-items: flex-start;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-mobile-center {
            .pp-buttons-group {
                align-items: center;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-mobile-right {
            .pp-buttons-group {
                align-items: flex-end;
            }
            .pp-button {
                flex-grow : 0;
            }
        }
        &.pp-buttons-halign-mobile-stretch {
            .pp-buttons-group {
                align-items: stretch;
                .pp-button {
                    flex-grow : 1;
                }
            }
        }
    }
	.pp-button-content-wrapper {
		.pp-button-content-inner {
			&.pp-icon-before-mobile {
				flex-direction: row;
			}
			&.pp-icon-after-mobile {
				flex-direction: row-reverse;
			}
			&.pp-icon-top-mobile {
				flex-direction: column;
			}
			&.pp-icon-bottom-mobile {
				flex-direction: column-reverse;
			}
		}
	}
}