.ons-list {
    margin: 0;
    padding: 0 0 0 1.5rem;

    &__item {
        &:first-child {
            margin-top: 0.5rem;
        }
    }

    &--spacious {
        .ons-list__item {
            margin: 0 0 1.5rem;
        }
    }

    &--bare {
        list-style: none;
        padding-left: 0;
    }

    &--dashed {
        @extend .ons-list--bare;
        .ons-list__item {
            margin-left: 25px;
            position: relative;
            &::before {
                border-top: 1px solid var(--ons-color-black);
                content: '';
                left: 0;
                margin-left: -25px;
                position: absolute;
                top: 14px;
                width: 15px;
            }
        }
    }

    &__link {
        display: inline-block;
        margin-right: 1rem;
        vertical-align: top;
        white-space: normal;
    }

    &__prefix {
        margin-right: 0.5rem;
    }

    &__suffix {
        margin-left: 0.5rem;
    }

    &--icons & {
        &__item {
            margin-top: 0;
        }
    }

    &__prefix,
    &__suffix {
        font-family: $font-mono;
    }

    &--prefix,
    &--suffix,
    &--icons {
        margin-bottom: 0;
        @extend .ons-list--bare;
        .ons-list__item {
            margin-bottom: 0.5rem;
            align-items: center;
            display: flex;
        }
    }

    &--icons {
        margin-bottom: 0;
        .ons-list__item {
            margin: 0 0 0.5rem;
        }
    }

    &--languages {
        margin-bottom: 0;
        .ons-list__link {
            margin-right: 0;
        }
    }

    &--p {
        padding: 0;
        .ons-list__item {
            margin: 0;
        }
    }

    &--summary {
        list-style: none;
        @extend .ons-u-pl-no;
        .ons-list__item:not(:last-child) {
            @extend .ons-u-bb;
        }
        .ons-list__item {
            @extend .ons-u-pt-s;
            @extend .ons-u-pb-s;
            @extend .ons-u-m-no;
        }
        .ons-list__prefix,
        .ons-list__suffix {
            @extend .ons-u-m-no;
            &--icon-check .ons-icon {
                fill: var(--ons-color-leaf-green) !important;
                @extend .ons-u-mr-s;
            }
        }
    }
}

@include bp-suffix('ons-list--inline') {
    &:not(.ons-list--icons) {
        margin: 0 1rem 0 0;
        .ons-list__item {
            display: inline-block;
            margin: 0 1rem 0 0;
        }
    }

    &.ons-list--icons {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
    }
}