/* -------------------------------------------
    Icon Box
    1. Icon Box
    2. Icon
    3. Content

---------------------------------------------- */

@import '../../../assets/sass/config';
@import '../../assets/sass/mixins/direction';
@import '../../assets/sass/mixins/mixins';

.icon-box {
    text-align: center;
    --alpus-icon-primary: var(--alpus-dark-color);
    --alpus-icon-primary-hover: var(--alpus-dark-color-hover);
    --alpus-icon-secondary: #fff;
    --alpus-icon-secondary-hover: #fff;
    --alpus-icon-spacing: 2.4rem;

    .icon-box-title {
        margin: 0 0 .7rem;
        text-transform: uppercase;
        line-height: 1.6;
    }

    p {
        margin: 0;
        font-size: 1.4rem;
        line-height: 1.72;
        color: var(--alpus-body-color);
    }

    i::before {
        margin: 0;
    }

    .icon-box-content {
        text-align: center;
    }
}

.icon-box-icon {
    display: inline-block;
    margin-bottom: var(--alpus-icon-spacing);

    font: {
        size: 3.5rem;
        weight: 600;
    }

    line-height: 0;

    i {
        color: var(--alpus-icon-primary);
    }

    &:hover i {
        color: var(--alpus-icon-primary-hover);
    }

    i {
        position: relative;
        width: 1em;
        height: 1em;

        &:before {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    svg {
        height: 3.4rem;
        width: 4.8rem;
    }
}

.icon-circle .icon-box-icon {
    border-radius: 50%;
}

.icon-border {
    .icon-box-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .5em;
        background-color: var(--alpus-icon-secondary);
        border: 1px solid;

        &:hover {
            background-color: var(--alpus-icon-secondary-hover);
        }
    }

    svg {
        height: 2.4rem;
    }
}

.icon-inversed {
    .icon-box-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .5em;
        background-color: var(--alpus-icon-primary);

        i {
            color: var(--alpus-icon-secondary);
        }

        &:hover {
            background-color: var(--alpus-icon-primary-hover);

            i {
                color: var(--alpus-icon-secondary-hover);
            }
        }
    }

    svg {
        height: 2.4rem;
        fill: white;
    }
}

@include mq('md') {
    .icon-box-side {
        display: flex;
        align-items: flex-start;
        justify-self: flex-start;

        .icon-box-icon {
            margin-#{$right}: var(--alpus-icon-spacing);
            margin-bottom: 0;
        }

        .icon-box-content {
            flex-grow: 1;
            text-align: #{$left};

            &+.icon-box-icon {
                margin-#{$left}: var(--alpus-icon-spacing);
                margin-#{$right}: 0;
            }
        }

        .icon-box-title {
            margin: 0;
        }

        &.right {
            flex-direction: row-reverse;
            justify-content: flex-end;
            text-align: right;

            .icon-box-icon {
                margin-#{$left}: var(--alpus-icon-spacing);
                margin-#{$right}: 0;
            }

            .icon-box-content {
                text-align: #{$right};

                &+.icon-box-icon {
                    margin-#{$right}: var(--alpus-icon-spacing);
                    margin-#{$left}: 0;
                }
            }
        }
    }
}