_todo-list-group.scss

// sass/components/_todo-list-group.scss
@import '../utils/_mixins.scss';
@import '../base/_variables.scss';


.todo__container {
    flex: 3;
    margin-right: 20px;

    .list-group-custom {
        border: 2px solid var(--btn-border-color);
        color: var(--text-light);
        font-family: var(--font-family-secondary);
        --bs-list-group-bg: var(--tertiary-color);
    }

    .hover-info {
        margin: 10px;
        position: relative;
        background-color: transparent;
        border: var(--custom-border);
        padding: 10px;
        z-index: 10;
        color: var(--text-light);
        font-weight: bold;
        font-family: var(--font-family-primary-extra-bold);
        transition: opacity 0.5s ease;
        opacity: 1;

        @include border-radius(10px);
    }

    .list-group-item {
        color: var(--primary-color);
    
        &:hover {
            background-color: var(--background-todo-item-hover);
        }
    }

    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .form-control:focus {
        border-color: var(--quaternary-color);

        @include box-shadow(0 0 0 0.15rem var(--quaternary-color));
    }
}