.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}


.list_section_wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.6rem;
    overflow-y: auto;
    max-height: 20rem;
    padding-right: 2rem;
}

.item_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--dark_800_color);
    padding: 0.2rem 0.2rem 0.2rem 1rem;
    border-radius: 0.4rem;
    &.is_redoable {
        background-color: var(--dark_850_color);
    }
}
.item_text {
    font-size: 1.4rem;
    font-weight: 300;
    &.is_redoable {
        text-decoration: line-through;
    }
}

.action_button {
    border-radius: 0.4rem;
    &:hover {
        background-color: var(--dark_750_color);
    }
    &:active {
        background-color: var(--dark_850_color);
    }
    &.delete {
        padding: 0.2rem;
    }
    &.redo {
        padding: 0.6rem;
    }
}

.delete_svg {
    width: 2.4rem;
    color: var(--error_bc_color);
}

.redo_svg {
    width: 1.6rem;
    color: var(--dark_500_color);
}




.entry_section_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.add_button {
    padding: 0.8rem 1.2rem;
    background-color: var(--primary_600_color);
    font-size: 1.4rem;
    border-radius: 0.4rem;
    text-align: center;
    flex-shrink: 0;
    &:hover {
        background-color: var(--primary_500_color);
    }
    &:active {
        background-color: var(--primary_700_color);
    }
}



.toggle_button_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.words_count_text {
    font-size: 1.6rem;
}

.toggle_button_wrapper {
    padding: 1.6rem;
    border-radius: 0.4rem;
    &:hover {
        background-color: var(--dark_825_color);
    }
    &:active {
        background-color: var(--dark_900_color);
    }
}

.arrow_left_svg {
    width: 2.4rem;
    &.to_down {
        transform: rotate(-90deg);
    }
    &.to_up {
        transform: rotate(90deg);
    }
}