@property --pl-iwt-columns {
    syntax: '<integer>';
    inherits: true;
    initial-value: 3;
}

@property --pl-iwt-icon-width {
    syntax: '<length-percentage>';
    inherits: true;
    initial-value: 64px;
}

@property --pl-iwt-icon-gap {
    syntax: '<length>';
    inherits: true;
    initial-value: 15px;
}

@property --pl-iwt-item-spacing {
    syntax: '<length>';
    inherits: true;
    initial-value: 30px;
}

@property --pl-iwt-divider-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 1px;
}

.pl-icon-text {
    --pl-iwt-vertical-align: center;
    --pl-iwt-divider-color: rgb(0 0 0 / 10%);
    --pl-iwt-icon-background: rgb(0 0 0 / 5%);
    --pl-iwt-icon-radius: 0px;
    --pl-iwt-icon-padding: 0px;
    --pl-iwt-icon-ratio: 1;
    --pl-iwt-icon-border-width: 0px;
    --pl-iwt-icon-border-color: transparent;
    --pl-iwt-columns: var(--pl-iwt-columns-desktop, 3);
    --pl-iwt-icon-width: var(--pl-iwt-icon-width-desktop, 64px);
    --pl-iwt-icon-gap: var(--pl-iwt-icon-gap-desktop, 15px);
    --pl-iwt-item-spacing: var(--pl-iwt-item-spacing-desktop, 30px);
}

@media (width <= 980px) {
    .pl-icon-text {
        --pl-iwt-columns: var(--pl-iwt-columns-tablet, var(--pl-iwt-columns-desktop, 3));
        --pl-iwt-icon-width: var(--pl-iwt-icon-width-tablet, var(--pl-iwt-icon-width-desktop, 64px));
        --pl-iwt-icon-gap: var(--pl-iwt-icon-gap-tablet, var(--pl-iwt-icon-gap-desktop, 15px));
        --pl-iwt-item-spacing: var(--pl-iwt-item-spacing-tablet, var(--pl-iwt-item-spacing-desktop, 30px));
    }
}

@media (width <= 767px) {
    .pl-icon-text {
        --pl-iwt-columns: var(--pl-iwt-columns-phone, var(--pl-iwt-columns-tablet, var(--pl-iwt-columns-desktop, 3)));
        --pl-iwt-icon-width: var(--pl-iwt-icon-width-phone, var(--pl-iwt-icon-width-tablet, var(--pl-iwt-icon-width-desktop, 64px)));
        --pl-iwt-icon-gap: var(--pl-iwt-icon-gap-phone, var(--pl-iwt-icon-gap-tablet, var(--pl-iwt-icon-gap-desktop, 15px)));
        --pl-iwt-item-spacing: var(--pl-iwt-item-spacing-phone, var(--pl-iwt-item-spacing-tablet, var(--pl-iwt-item-spacing-desktop, 30px)));
    }
}

.pl-icon-text-items {
    display: grid;
    gap: var(--pl-iwt-item-spacing);
    grid-template-columns: minmax(0, 1fr);

    .pl-icon-text--row & {
        grid-template-columns: repeat(var(--pl-iwt-columns), minmax(0, 1fr));
    }
}

.pl-icon-text-item {
    display: flex;
    gap: var(--pl-iwt-icon-gap);
    align-items: center;

    .pl-icon-text--icon-top & {
        flex-direction: column;
    }

    .pl-icon-text--icon-left & {
        flex-direction: row;
        align-items: var(--pl-iwt-vertical-align);
    }

    .pl-icon-text--icon-right & {
        flex-direction: row-reverse;
        align-items: var(--pl-iwt-vertical-align);
    }
}

.pl-icon-text-item-link {
    display: flex;
    flex: 1 1 auto;
    gap: inherit;
    align-items: inherit;
    flex-direction: inherit;
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus-visible {
        color: inherit;
    }
}

.pl-icon-text-item-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    inline-size: var(--pl-iwt-icon-width);
    max-inline-size: 100%;
    aspect-ratio: var(--pl-iwt-icon-ratio);
    border: var(--pl-iwt-icon-border-width) solid var(--pl-iwt-icon-border-color);
    border-radius: var(--pl-iwt-icon-radius);

    & :is(img, svg) {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
    }

    .pl-icon-text--ratio-auto & {
        aspect-ratio: auto;

        & :is(img, svg) {
            block-size: auto;
        }
    }

    .pl-icon-text--shaped & {
        padding: var(--pl-iwt-icon-padding);
        background-color: var(--pl-iwt-icon-background);
    }
}

.pl-icon-text-item-title {
    flex: 1 1 auto;
    min-inline-size: 0;
    text-wrap: pretty;

    & :last-child {
        margin-block-end: 0;
    }
}

.pl-icon-text--align-left .pl-icon-text-item {
    text-align: start;

    &:is(.pl-icon-text--icon-top *) {
        align-items: flex-start;
    }
}

.pl-icon-text--align-center .pl-icon-text-item {
    text-align: center;

    &:is(.pl-icon-text--icon-top *) {
        align-items: center;
    }
}

.pl-icon-text--align-right .pl-icon-text-item {
    text-align: end;

    &:is(.pl-icon-text--icon-top *) {
        align-items: flex-end;
    }
}

.pl-icon-text--align-center:is(.pl-icon-text--icon-left, .pl-icon-text--icon-right) {
    & .pl-icon-text-item,
    & .pl-icon-text-item-link {
        justify-content: center;
    }

    & .pl-icon-text-item-title {
        flex: 0 1 auto;
    }
}

.pl-icon-text--divider .pl-icon-text-item:not(:last-child) {
    border-color: var(--pl-iwt-divider-color);
    border-style: solid;
    border-width: 0;
}

.pl-icon-text--divider.pl-icon-text--column .pl-icon-text-item:not(:last-child),
.pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-1 .pl-icon-text-item:not(:last-child) {
    padding-block-end: var(--pl-iwt-item-spacing);
    border-block-end-width: var(--pl-iwt-divider-width);
}

.pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-2 .pl-icon-text-item:not(:last-child):not(:nth-child(2n)),
.pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-3 .pl-icon-text-item:not(:last-child):not(:nth-child(3n)),
.pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-4 .pl-icon-text-item:not(:last-child):not(:nth-child(4n)),
.pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-5 .pl-icon-text-item:not(:last-child):not(:nth-child(5n)),
.pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-6 .pl-icon-text-item:not(:last-child):not(:nth-child(6n)) {
    padding-inline-end: var(--pl-iwt-item-spacing);
    border-inline-end-width: var(--pl-iwt-divider-width);
}

@media (width <= 980px) {
    .pl-icon-text--divider.pl-icon-text--row .pl-icon-text-item {
        padding-inline-end: 0;
        padding-block-end: 0;
        border-inline-end-width: 0;
        border-block-end-width: 0;
    }

    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-t-1 .pl-icon-text-item:not(:last-child) {
        padding-block-end: var(--pl-iwt-item-spacing);
        border-block-end-width: var(--pl-iwt-divider-width);
    }

    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-t-2 .pl-icon-text-item:not(:last-child):not(:nth-child(2n)),
    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-t-3 .pl-icon-text-item:not(:last-child):not(:nth-child(3n)),
    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-t-4 .pl-icon-text-item:not(:last-child):not(:nth-child(4n)),
    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-t-5 .pl-icon-text-item:not(:last-child):not(:nth-child(5n)),
    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-t-6 .pl-icon-text-item:not(:last-child):not(:nth-child(6n)) {
        padding-inline-end: var(--pl-iwt-item-spacing);
        border-inline-end-width: var(--pl-iwt-divider-width);
    }
}

@media (width <= 767px) {
    .pl-icon-text--divider.pl-icon-text--row .pl-icon-text-item {
        padding-inline-end: 0;
        padding-block-end: 0;
        border-inline-end-width: 0;
        border-block-end-width: 0;
    }

    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-p-1 .pl-icon-text-item:not(:last-child) {
        padding-block-end: var(--pl-iwt-item-spacing);
        border-block-end-width: var(--pl-iwt-divider-width);
    }

    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-p-2 .pl-icon-text-item:not(:last-child):not(:nth-child(2n)),
    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-p-3 .pl-icon-text-item:not(:last-child):not(:nth-child(3n)),
    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-p-4 .pl-icon-text-item:not(:last-child):not(:nth-child(4n)),
    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-p-5 .pl-icon-text-item:not(:last-child):not(:nth-child(5n)),
    .pl-icon-text--divider.pl-icon-text--row.pl-icon-text--cols-p-6 .pl-icon-text-item:not(:last-child):not(:nth-child(6n)) {
        padding-inline-end: var(--pl-iwt-item-spacing);
        border-inline-end-width: var(--pl-iwt-divider-width);
    }
}