/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
 
@import "../variables";
@import "../variables/lists_vars";
@import "../mixins";

.dlt-list {
    list-style: none;
    margin: 0;
    padding: 0rem;
    height: auto;
    width: 100%;
    background: $lists-color-background;
    border-radius: $lists-border-radii;

    &--sm {
        .dlt-list-item {
            padding: $lists-padding-sm;
            border-bottom-color: transparent;
        }
    }

    &--lg {
        .dlt-list-item {
            padding: $lists-padding-lg;
        }
    }

    &--multiline {

        .dlt-list-item {
            padding: $lists-multiline-padding-md;
            align-items: start;

            // .dlt-list-item__icon {
            //     margin-top: $lists-multiline-md-icon-margin-top;
            // }
        }

        &.dlt-list--sm {
            .dlt-list-item {
                padding: $lists-multiline-padding-sm;
                border-bottom-color: $lists-color-border;
            }
        }

        &.dlt-list--lg {
            .dlt-list-item {
                padding: $lists-multiline-padding-lg;
            }
        }

    }

    [data-allow-selection] &-item {

        cursor: pointer;

        &:hover,
        &:focus,
        &--selected {
            // border: $lists-border-width $lists-border-style $lists-color-primary;
            outline: $lists-border-width-hover $lists-border-style-hover $lists-color-primary;
            outline-offset: $lists-outline-offset;
        }
        &:active:not(:focus-within){
            background: $lists-color-secondary-active;
        }
    }

    &-item {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-start;
        padding: $lists-item-padding;

        // border: $lists-border-width $lists-border-style transparent;
        outline: $lists-border-width $lists-border-style transparent;
        outline-offset: $lists-outline-offset;
        border-bottom: $lists-border-width $lists-border-style $lists-color-border;

        &__icon {
            font-size: $lists-item-icon-font-size;
            margin-right: $lists-item-icon-margin-right;
            width: $lists-item-icon-size;
            height: $lists-item-icon-size;
            flex-shrink: 0;
            align-items: start;
            justify-content: center;
            color: $lists-color-icon-static-muted;
        }

        &__text {
            font-size: $lists-font-size;
            font-weight: $lists-font-weight;
            flex: 1;
            line-height: $lists-line-height;

            span {
                display: inline-block;
            }
        }

        &__primary-text {
            line-height: $lists-primary-line-height;
        }

        &__secondary-text {
            width: 100%;
            line-height: $lists-secondary-line-height;
            font-size: $lists-secondary-font-size;
            font-weight: $lists-secondary-font-weight;
        }

        &__actions {
            width: auto;
            height: 24px;
            float: right;

            .dlt-button-icon {
                background-color: transparent;
                padding: 0;
                margin: 0;
                height: $lists-action-icon-size;
                width: $lists-action-icon-size;
                line-height: $lists-action-icon-line-height;
                cursor: pointer;
                transition: $lists-transition-time $lists-transition-effect;
                outline: 0;

                &:first-child {
                    margin-right: $lists-action-icon-margin-right;
                }

                i,
                em {
                    font-size: $lists-action-icon-font-size;
                    line-height: $lists-action-icon-line-height;
                }
            }
        }
    }

}