* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--ff);
}

:root {
    --bg-primary: #F4F5FB;
    --bg-secondary: #FFFFFF;
    --color-brand: #CA3884;
    --color-brand-hover: #A52C6B;
    --color-danger: #C93847;
    --content-primary: #080B12;
    --content-secondary: #374151;
    --content-tertiary: #9CA3AF;
    --always-white: #FFFFFF;
    --border: #D1D5DB;
    --border-hover: #B9C2D0;

    --ff: "Inter", sans-serif;
    --title: 700 1.5rem var(--ff);
    --label: 600 1rem var(--ff);
    --paragraph: 400 1rem var(--ff);
    --placeholder: 400 1rem/140% var(--ff);
    --link: 400 0.875rem var(--ff);
}

body {
    background-color: var(--bg-primary);
    padding-inline: 1rem;
}

.container-app {
    max-width: 39rem;
    margin-inline: auto;
    margin-top: 1.5625rem;

    & .logo {
        display: flex;
        justify-content: center;
        margin-bottom: 3.875rem;
    }

    & span {
        color: var(--color-brand);
        cursor: default;
        transition: 0.2s;
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;

        & svg {
            width: 1rem;
            height: 1rem;
        }

        &:hover {
            color: var(--color-brand-hover);
        }
    }

    & h1 {
        margin-top: 1rem;
        font: var(--title);
        color: var(--content-primary);
    }

    & .container-add-item {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-block: 2.75rem 2.5rem;

        & input {
            all: unset;
            width: 100%;
            padding: 0.6875rem 1.125rem;
            border: 2px solid var(--border);
            border-radius: 0.75rem;
            font: var(--placeholder);
            background-color: var(--bg-secondary);

            flex: 3 0 200px;

            &:hover {
                border-color: var(--border-hover);
            }

            &:focus {
                border-color: var(--color-brand);
            }
        }

        & button {
            all: unset;
            background-color: var(--color-brand);
            color: var(--always-white);
            border-radius: 12px;
            padding: 0.75rem 1.5rem;
            transition: 0.5s;
            text-align: center;
            white-space: nowrap;
            cursor: pointer;

            flex: 1 0 0;

            &:hover {
                background-color: var(--color-brand-hover);
            }
        }
    }

    & .list {
        display: grid;
        gap: 12px;

        max-height: 15.5rem;
        overflow-y: scroll;

        &::-webkit-scrollbar {
            display: none;
        }

        & .item {
            display: flex;
            align-items: center;
            gap: 10px;

            & .container-ckeckbox {
                width: 1rem;
                height: 1rem;
                cursor: pointer;
                position: relative;

                & .img-checkbox {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;

                    background-image: url(assets/icons/check-default.png);
                    background-size: 100%;
                    background-repeat: no-repeat;
                    background-position: center;

                }
                
                &:hover {
                    & .img-checkbox {
                        background-image: url(assets/icons/check-hover.png);
                    }
                }

                &:has(:checked) {
                    & .img-checkbox {
                        background-image: url(assets/icons/check-selected.png);
                    }
                }

                & .checkbox {
                    all: unset;
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                }
            }

            & .img-dell {
                margin-left: auto;
                height:20px;
                width: 20px;
                cursor: pointer;
            }
        }

    }

    & .container-info {
        margin-top: 2.25rem;
        display: grid;
        gap: 1rem;

        & .info {
            display: flex;
            gap: 8px;
            padding: 1rem 0.875rem;

            background-color: var(--color-danger);
            color: var(--always-white);

            border-radius: 12px;

            & img[src*="delete"] {
                margin-left: auto;
                cursor: pointer;
            }
        }
    }

}

@media (width < 428px) {

    .container-app {
        & .logo {
            display: none;
        }
    }
}