@import '../../Styles/abstracts/_media-queries.scss';
@import '../../Styles/abstracts/_bit-css-variables.scss';

section {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

::deep {
    .stack {
        max-width: 45rem;
    }

    .todo-header {
        @include lt-sm {
            gap: 0 !important;
            position: relative;
            align-items: flex-start !important;
            flex-direction: column-reverse !important;
        }
    }

    .todo-search {
        width: 192px;

        @include lt-sm {
            width: 100%;
        }
    }

    .todo-sort {
        @include lt-sm {
            bottom: 0;
            position: absolute;
            inset-inline-end: 0;
        }
    }

    .todo-list {
        width: 100%;
        background-color: var(--bit-clr-bg-sec);
        height: calc(#{$bit-env-height-available} - 14rem);

        @include lt-md {
            height: calc(#{$bit-env-height-available} - 17rem);
        }

        @include lt-sm {
            height: calc(#{$bit-env-height-available} - 18rem);
        }
    }
}
