/* -------------------------------------------
	Custom Icon List
---------------------------------------------- */

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

.alpha-icon-lists {
    display: flex;

    &.block-type {
        flex-direction: column;
        .alpha-icon-list-item:#{$after} {
            display: block;
            position: absolute;
            #{$left}: 0;
            top: 100%;
            width: 100%;
            border-style: solid;
            border-width: 0 0 1px;
        }
    }

    &.inline-type {
        flex-wrap: wrap;
        align-items: center;
        .alpha-icon-list-item:#{$after} {
            position: absolute;
            top: 50%;
            #{$left}: 100%;
            transform: translateY(-50%);
            border-style: solid;
            border-width: side-values(0 1px 0 0);
        }
    }

    .list-title {
        margin: 0 1rem;
    }
}

.alpha-icon-list-item {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--alpha-change-color-dark-1);
    svg {
        width: 1em;
        height: auto;
    }

    &:hover {
        color: var(--alpha-primary-color);
    }
}
