/* Used to visualize attributes of a product in M2's PDP */

.#{$namespace}attributes-list {
    $root: &;

    &__list {
        @extend .#{$namespace}list;
        list-style: none;
        font-size: 1.4rem;
        text-align: left;

        &--columns {
            @include media('>=phone-lg') {
                columns: 2;
            }
        }

        &--long-labels {
            #{$root}__item,
            #{$root}__item-label {
                @include media('<tablet') {
                    width: 45%;
                }
            }
        }
    }

    &__item {
        padding: 0.5rem 0 0 1.5rem;
        margin: 0;
        position: relative;
        display: inline-block;
        clear: right;
        width: 45%;

        @include media('>=phone-lg') {
            width: 65%;
        }
    }

    &__item-label {
        padding: 0.5rem 0 0;
        font-weight: 700;
        display: inline-block;
        margin: 0;
        vertical-align: top;
        width: 45%;
        @include media('>=phone-lg') {
            width: 22%;
        }

        &--long {
            width: 40%;
        }
    }

    &__bullet {
        @extend .#{$namespace}list__bullet;

        &--tick {
            position: absolute;
            top: 5px;
            left: 0;
            width: 0.75em;
            height: 0.7em;
            fill: $colorApple;
        }
    }
}