.codeflow-list-item {

    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    min-height: 3.2rem;
    font-weight: 400;
    color: $color-text-weak;

    margin: 0 $margin-sm;
    padding: $padding-sm $padding-sm;

    &__body {
        flex: 1;
    }

    &--selected {
        background-color: $color-hover;
        color: $color-text;
    }

    &--disabled {
        color: $color-dsabled;

        &:hover {
            background-color: transparent !important;
            cursor: default !important;
            color: $color-dsabled !important;
        }
    }

    &:hover {
        transition: .5s;
        background-color: $color-hover;
        color: $color-text;
        cursor: pointer;
    }

    &--primary {
        @include list-item-type($color-primary, $color-primary-invert);
    }

    &--secondary {
        @include list-item-type($color-secondary, $color-secondary-invert);
    }

    &--danger {
        @include list-item-type($color-danger, $color-danger-invert);
    }
}

.codeflow-list-item__hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: $margin-md 0;
    background-color: $color-border-light;
    border-top: 1px solid $color-border-light;
}