@import "app/styles/variables";

bl-quick-list-row-render {
    cursor: pointer;
    display: flex;
    width: 100%;
    height: 48px;
    white-space: nowrap;

    &.selected {
        background-color: map-get($primary, 400);

        .quick-list-row-title {
            font-size: 14px;
            color: $card-background;
        }

        .quick-list-row-state {
            color: $card-background;
        }

        .quick-list-row-extra * {
            color: $card-background;
        }
    }

    &.focused {
        outline: none;
        background-color: $primary-color;

        .quick-list-row-title {
            color: $card-background;
        }

        .quick-list-row-state {
            color: $card-background;
        }
    }

    &:hover:not(.selected) {
        background-color: $hover-bg-color;
    }

    .quick-list-row-title {
        font-size: 14px;
        color: $primary-text;
    }

    .quick-list-row-state {
        color: $secondary-text;
    }

    .quick-list-details {
        flex: 1 1 auto;
        overflow: hidden;
        padding: 5px;
        text-overflow: ellipsis;
        min-width: 0;


        .quick-list-row-title, .quick-list-row-state {
            display: flex;
            overflow: hidden;
            text-overflow: ellipsis;

            > bl-tags {
                margin-left: 5px;
            }
        }
    }

    .quick-list-row-extra {
        padding: 5px;

        i {
            padding: 2px;
        }

        .fa-hourglass-half {
            color: $primary-color;
        }
    }

    bl-quick-list-item-status {
        position: relative;
        color: $primary-color;
        flex: 0 0 8px;
        display: flex;
        align-items: stretch;
        > .status-badge {
            width: 100%;

            &.warning {
                background-color: $danger-color;
            }

            &.lightaccent {
                background: map-get($primary, 100);

            }

            &.accent {
                background: map-get($primary, 300);
            }

            &.important {
                background: repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 5px,
                    $secondary-background 5px,
                    $secondary-background 10px
                ), $primary-color;
            }
        }
    }

    .select-item-container {
        width: 17px;
        padding: 7px 0 0 3px;
    }

    .quick-list-details {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;

        .quick-list-row-title, .quick-list-row-state {
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .quick-list-row-extra {
        padding: 3px 10px 0 0;
    }

    .quick-list-other {
        .select-item-checkbox {
            position: absolute;
            right: 0;

        }
    }

    .focus-outline.focus-visible {
        outline-color: $card-background;
    }
}

@media (forced-colors: active) {
    bl-quick-list-row-render.selected {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}
