@import 'list-variables';

.list {
    margin: $list__margin;
    padding: $list__padding;
    list-style: $list__list-style;
    color: $list__color;
    font-size: $list__font-size;

    &--center {
        justify-content: center;
        text-align: center;
    }

    &--horizontal {
        display: flex;
        flex-flow: row wrap;

        @include mq($screen-m) {
            flex-flow: row nowrap;
        }

        .list__item {
            padding: $list__item-padding--horizontal;

            &:first-child,
            &:last-child {
                padding: $list__item-padding--horizontal;
            }
        }
    }

    &--with-icon {
        justify-content: center;

        .list__item {
            display: flex;
            align-items: center;
            padding: $list__item-padding--with-icon;

            &:first-child,
            &:last-child {
                padding: $list__item-padding--with-icon;
            }
        }

        .list__icon-link {
            padding: $list__icon-link-padding--with-icon;
        }
    }

    &--with-image {
        .list__item {
            display: flex;
        }
        .list__image {
            width: $list__image-width--with-image;
            height: $list__image-height--with-image;
        }
    }

    &--divided {
        .list__item {
            border-bottom: $list__item-border-bottom--divider;
            padding: $list__item-padding--divider;

            &:last-child {
                border-bottom: $list__item-last-child-border-bottom--divider;
            }
        }

        &.list--horizontal {
            .list__item {
                border-bottom: $list__item-border-bottom--divider-horizontal;
                border-right: $list__item-border-right--divider-horizontal;
                padding: $list__item-padding--divider-horizontal;

                &:last-child {
                    border-right: $list__item-last-child-border-right--divider-horizontal;
                }
            }
        }
    }

    &--description {
        display: inline-block;
    }

    &--native {
        .list__item {
            @extend %bullet;
            position: relative;
            padding: $list__item-padding--native;
        }
    }

    &--table {
        display: table;
        margin: $list__margin--table;

        .list__item {
            display: table-row;
        }

        .list__label {
            display: table-cell;
            float: none;
            font-size: $list__label-font-size--table;
            font-weight: $list__label-font-weight--table;
            line-height: $list__item-line-height--table;
        }

        .list__value {
            display: table-cell;
            float: none;
            font-size: $list__value-font-size--table;
            line-height: $list__item-line-height--table;
        }
    }

    &__item {
        display: list-item;
        padding: $list__item-padding;

        &:last-child {
            padding: $list__item-last-child-padding;
        }
    }

    &__label {
        clear: left;
        float: left;
        padding: $list__label-padding;

        &:after {
            content: $list__label-after-content;
        }
    }

    &__value {
        float: left;
        padding: $list__value-padding;
    }

    &__content {
        padding-left: $list__content-padding-left;
    }

    &__columns {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;

        @include mq($screen-m) {
            flex-direction: row;
        }
    }

    &__column {
        padding: $list__column-padding;

        &:last-child {
            padding: $list__column-last-child-padding;
        }

        &--hidden {
            & > .link {
                display: none;
            }
        }
    }

    &__column-item {
        &:first-child {
            padding-top: $list__column-item-fist-child-padding-top;
        }

        &:last-child {
            padding-bottom: $list__column-item-last-child-padding-bottom;
        }
    }
}