/**
 * swift-todolist.css
 * 
 * CSS file for styling the to-do list plugin's frontend display. Includes
 * styles for task listings, buttons, forms, and responsive adjustments.
 * author: Shayan Ghiaseddin
 * website: sghiaseddin.com
 */
 .swift-todo-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    width: 100%;
    max-width: 1280px;
}

.swift-todo-wrapper>h2,.swift-todo-wrapper>p {
    flex: 1
}

.swift-todo-wrapper a.button,
a.button.goto-todolist-page {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    padding: 5px 20px;
    text-decoration: unset;
    font-weight: 700;
    border: 2px solid var(--wp--preset--color--contrast);
    border-radius: 7px;
    transition: 300ms
}

.swift-todo-wrapper a.button:hover,
a.button.goto-todolist-page:hover {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

.swift-todo-wrapper>.swift-todo-list {
    flex: 1 1 100%
}

.swift-todo-list .swift-todo-list-header {
    display: flex;
    gap: 10px;
    font-weight: 700;
    border-bottom: 2px solid var(--wp--preset--color--contrast);
    padding-bottom: 10px;
    margin-bottom: 10px
}

.swift-todo-list-header>span:nth-child(1) {
    flex: 1 1
}

.swift-todo-list-header>span:nth-child(2) {
    flex: 2 2
}

.swift-todo-list-header>span:nth-child(3) {
    width: 85px
}

.swift-todo-list .swift-todo-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.swift-todo-list .swift-task-item {
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.swift-todo-list .swift-task-item:after {
    content: "";
    display: block;
    width: 200px;
    height: 2px;
    background-color: var(--wp--preset--color--accent);
    position: absolute;
    transform: translate(-50%,-10px);
    left: 50%
}

.swift-todo-list .swift-task-item:first-child:after {
    display: none
}

.swift-todo-list-container .swift-task-title {
    flex: 1 1
}

.swift-todo-list-container .swift-task-title>input {
    width: calc(100% - 10px);
    padding: 10px 5px;
    border: 2px solid var(--wp--preset--color--accent);
    font-family: inter
}

.swift-todo-list-container .swift-task-desc {
    flex: 2 2
}

.swift-todo-list-container .swift-task-desc>textarea {
    width: calc(100% - 10px);
    padding: 10px 5px;
    border: 2px solid var(--wp--preset--color--accent);
    font-family: inter;
    min-height: 100px
}

.swift-todo-list-container .swift-task-actions {
    display: flex;
    width: 85px;
    gap: 5px
}

.swift-todo-wrapper .swift-task-actions a {
    text-decoration: unset
}

.swift-todo-wrapper .swift-task-actions a:hover {
    text-decoration: underline
}

.swift-todo-wrapper .swift-task-actions span {
    font-size: 25px;
    width: 25px
}

.long-desc:after {
    content: "..."
}

.swift-todo-wrapper .swift-task-container {
    flex: 1 1 100%
}