.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;
}

.pp-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pp-info-list-container {
    overflow: hidden;

    li {
        overflow: hidden;
        position: relative;
    }

    li:last-child {
        overflow: hidden;
    }

	.pp-list-items li {
		display: block;
	}

    .pp-info-list-item-inner {
        align-items: center;
        display: flex;
    }

    .pp-infolist-icon-wrapper {
        background: #f5f5f5;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        position: relative;
    }

    .pp-info-list-number {
        text-align: center;
    }

    .pp-info-list-item {

        &:last-child {
            margin-bottom: 0 !important;
        }
    }

	.pp-list-items {

		a {
			color: inherit;
		}
	}
}

.pp-infolist-content-wrapper {
	width: 100%;
}

.pp-info-list-icon-left,
.pp-info-list-icon-right {

    &.pp-info-list-icon-vertical-middle {

        .pp-info-list-item-inner {
            align-items: center;
        }
    }

    &.pp-info-list-icon-vertical-top {

        .pp-info-list-item-inner {
            align-items: flex-start;
        }

        .pp-info-list-item:first-child {

            .pp-infolist-icon-wrapper::before {
                display: none;
            }
        }
    }

    &.pp-info-list-icon-vertical-bottom {

        .pp-info-list-item-inner {
            align-items: flex-end;
        }

        .pp-info-list-item:last-child {

            .pp-infolist-icon-wrapper::after {
                display: none;
            }
        }
    }
}

.pp-info-list-icon-top {

    &.pp-info-list-icon-horizontal-center {

        .pp-info-list-item-inner {
            align-items: center;
        }
    }

    &.pp-info-list-icon-horizontal-left {

        .pp-info-list-item-inner {
            align-items: flex-start;
        }

        .pp-info-list-item:first-child {

            .pp-infolist-icon-wrapper::before {
                display: none;
            }
        }
    }

    &.pp-info-list-icon-horizontal-right {

        .pp-info-list-item-inner {
            align-items: flex-end;
        }

        .pp-info-list-item:last-child {

            .pp-infolist-icon-wrapper::after {
                display: none;
            }
        }
    }
}

.pp-info-list-icon-left {

    .pp-infolist-icon-wrapper {
        margin-inline-end: 10px;
    }

    .pp-info-list-connector {

        .pp-infolist-icon-wrapper {

            &::before {
                content: '';
                border-inline-end: 1px solid #000;
                height: 1500px;
                bottom: 14px;
                inset-inline-start: calc(7px - (1px/2));
                position: absolute;
                width: 1px;
            }

            &::after {
                content: '';
                border-inline-end: 1px solid #000;
                height: 1500px;
                top: 14px;
                inset-inline-start: calc(7px - (1px/2));
                position: absolute;
                width: 1px;
            }
        }
    }
}

.pp-info-list-icon-right {

    .pp-info-list-item {
        justify-content: flex-end;
        text-align: end;
    }

    .pp-infolist-icon-wrapper {
        margin-inline-start: 10px;
        order: 2;
    }

    .pp-info-list-connector {

        .pp-infolist-icon-wrapper {

            &::before {
                content: '';
                border-inline-start: 1px solid #000;
                height: 1500px;
                bottom: 14px;
                inset-inline-end: calc(7px - (1px/2));
                position: absolute;
                width: 1px;
            }

            &::after {
                content: '';
                border-inline-start: 1px solid #000;
                height: 1500px;
                top: 14px;
                inset-inline-end: calc(7px - (1px/2));
                position: absolute;
                width: 1px;
            }
        }
    }
}

.pp-info-list-connector.pp-info-list-corners-hide {

	.pp-info-list-item:first-child {

		.pp-infolist-icon-wrapper {

			&::before {
				display: none;
			}
		}
	}

	.pp-info-list-item:last-child {

		.pp-infolist-icon-wrapper {

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

.pp-info-list-icon-top {

    .pp-list-items {
        display: flex;
        justify-content: center;
    }

    .pp-list-items {

        .pp-info-list-item {
            display: inline-block;
            flex-grow: 1;
            flex-basis: 0;
            text-align: center;

            &:last-child {
                margin-inline-end: 0 !important;
            }
        }
    }

    .pp-infolist-icon-wrapper {
        margin-bottom: 10px;
        vertical-align: top;
    }

    .pp-info-list-connector {

        .pp-infolist-icon-wrapper {

            &::before {
                content: '';
                border-top: 1px solid #000;
                height: 1px;
                top: calc(7px - (1px/2));
                inset-inline-start: auto;
                inset-inline-end: 14px;
                position: absolute;
                width: 1500px;
            }

            &::after {
                content: '';
                border-top: 1px solid #000;
                height: 1px;
                inset-inline-start: 14px;
                top: calc(7px - (1px/2));
                inset-inline-end: auto;
                position: absolute;
                width: 1500px;
            }
        }
    }

    .pp-info-list-item-inner {
        flex-direction: column;
    }
}

.pp-infolist-icon-wrapper {
    line-height: 1;
    position: relative;
    z-index: 1;
}

.pp-info-list-item {

    .pp-info-list-button {
        display: inline-flex;

        .pp-button-icon {
            margin-inline-end: 10px;
        }

        &-icon-after {

            .pp-button-icon {
                margin-inline-start: 10px;
                margin-inline-end: 0;
                order: 2;
            }
        }
    }
}

@media (max-width: 1024px) {

    .pp-info-list-stack-tablet.pp-info-list-icon-top {

        .pp-info-list-container .pp-list-items {
            display: block;

            .pp-info-list-item {
                display: block;
                text-align: center !important;
                width: 100% !important;
            }
        }

        .pp-info-list-item-inner {
            flex-direction: row;
        }

        .pp-infolist-icon-wrapper {
            margin-bottom: 0;
            margin-inline-end: 10px;

            &::before {
                content: '';
                border-inline-end: 1px solid #000;
                height: 1500px;
                bottom: 14px;
                inset-inline-start: calc(7px - (1px/2));
                position: absolute;
                width: 1px;
                top: auto;
            }

            &::after {
                content: '';
                border-inline-end: 1px solid #000;
                height: 1500px;
                inset-inline-start: calc(7px - (1px/2));
                position: absolute;
                width: 1px;
                top: auto;
            }
        }
    }
}

@media only screen and (max-width: 767px) {

    .pp-info-list-stack-mobile.pp-info-list-icon-top {

        .pp-info-list-container .pp-list-items {
            display: block;

            .pp-info-list-item {
                display: block;
                text-align: center !important;
                width: 100% !important;
            }
        }

        .pp-info-list-item-inner {
            flex-direction: row;
        }

        .pp-infolist-icon-wrapper {
            margin-bottom: 0;
            margin-inline-end: 10px;

            &::before {
                content: '';
                border-inline-end: 1px solid #000;
                height: 1500px;
                bottom: 14px;
                inset-inline-start: calc(7px - (1px/2));
                position: absolute;
                width: 1px;
                top: auto;
            }

            &::after {
                content: '';
                border-inline-end: 1px solid #000;
                height: 1500px;
                inset-inline-start: calc(7px - (1px/2));
                position: absolute;
                width: 1px;
                top: auto;
            }
        }
    }
}