@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --secondary-bg-value: 31, 41, 55; /* Just the R, G, B values */
    --secondary-bg: rgb(var(--secondary-bg-value));
    --button-bg: 29, 78, 216;
}

.roboto-regular {
    font-style: normal;
    font-weight: 400;
    font-family: "Roboto";
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #111827;
    color: white;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell,
        "Open Sans", "Helvetica Neue", sans-serif;
}

main {
    display: flex;
    position: relative;
    flex-direction: column;
    width: min(60ch, 100%);
    min-height: 100vh;
    min-height: 100dvh;
    margin-inline: auto;
    padding: 0.75rem;
    gap: 0.5rem;
}

.search-wrapper {
    display: inline-block;
    position: relative;
    margin-bottom: 1rem;

    & input.search-input {
        width: 100%;
        padding-left: 2.5rem;
        padding-block: 0.5rem;
        border: none;
        border-radius: 5px;
        background-color: var(--secondary-bg);
        color: white;

        &:focus {
            outline: 2px solid rgb(43, 127, 255);
        }
    }

    & img.search-icon {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        filter: invert(0.5);
        pointer-events: none;
    }
}

.notes-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0.75rem;
    list-style: none;

    & li {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        gap: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 5px;
        background-color: var(--secondary-bg);

        cursor: pointer;

        & .note-title {
            font-weight: 700;
            font-size: 1.5rem;
        }

        & .note-body {
            font-size: 1rem;
        }

        &:hover {
            border-color: rgba(255, 255, 255, 0.2);
            background-color: rgba(var(--secondary-bg-value), 0.6);
        }

        & .dates {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            font-size: 0.8rem;
            opacity: 0.5;
        }
    }
}

.button-position {
    display: flex;
    position: fixed;
    right: 15px;
    bottom: 15px;
    justify-content: flex-end;
}

.add-note-button {
    --_size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_size);
    height: var(--_size);
    border: none;
    border-radius: 50%;
    background-color: rgb(var(--button-bg));
    color: white;
    font-size: 3rem;
    cursor: pointer;

    &:hover {
        background-color: rgba(var(--button-bg), 0.8);
    }
}

dialog {
    display: flex;
    flex-direction: column;
    width: min(60ch, 100%);
    min-height: 12.5rem;
    margin: auto;
    padding: 1rem;
    overflow: hidden;
    border: none;
    border-radius: 8px;
    background-color: var(--secondary-bg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    scrollbar-color: #888 #f1f1f1; /* thumb-color track-color */
    scrollbar-width: thin; /* Make the scrollbar thin */
    transition: all 0.7s allow-discrete;

    &.hidden {
        display: none;
    }

    /* Open state of the dialog  */
    &:open {
        opacity: 1;
    }

    &::backdrop {
        background-color: rgb(0 0 0 / 0%);
        transition: all 0.7s allow-discrete;
    }

    &:open::backdrop {
        background-color: rgb(0 0 0 / 25%);
    }
}

@starting-style {
    dialog:open {
        opacity: 0;
    }
}

@starting-style {
    dialog:open::backdrop {
        background-color: rgb(0 0 0 / 0%);
    }
}

.modal-title {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
}

.modal-title,
.modal-body {
    --_bg-color: #374151;
    background-color: var(--_bg-color);
    color: white;
}

.modal-title:focus,
.modal-body:focus {
    outline: none;
}

.modal-title,
.modal-body,
.close-modal {
    border-radius: 10px;
}

.modal-body {
    flex-grow: 1;
    padding: 15px 20px;
    overflow-y: auto;
}
/* Works on Firefox */
* {
    scrollbar-color: var(--secondary-bg) rgba(128, 128, 128, 0);
    scrollbar-gutter: auto;
    scrollbar-width: thin;
}

.modal-footer {
    display: flex;
    z-index: 1;
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding: 10px 20px;
    gap: 10px;
    background-color: var(--secondary-bg);
}

body.no-scroll {
    overflow: hidden;
}

.last-modified {
    align-self: flex-end;
    color: white;
}

.delete-button.hidden {
    display: none;
}

.delete-button,
.close-modal {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.close-modal {
    background-color: blue;

    &:hover {
        background-color: rgba(0, 0, 255, 0.8);
    }
}

.delete-button {
    background-color: red;

    &:hover {
        background-color: rgba(255, 0, 0, 0.8);
    }
}