@charset "UTF-8";

body
{
    background-color: var(--color-primary);
    color: var(--color-text);
    position: relative;
    text-outline: #0d75dc 1px;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;

}
main
{
    overflow-y: auto;
}
.page-container
{

}
.page-wrapper
{
    display: none;
    width: 100vw;
    height: 100%;
}

.page-container[data-page="1"] .page-wrapper:nth-child(1)
{
    display: block;
}
.page-container[data-page="2"] .page-wrapper:nth-child(2)
{
    display: block;
}
.page-container[data-page="3"] .page-wrapper:nth-child(3)
{
    display: block;
}

form
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

dialog
{
    margin-top: 15%;
}

.quantityChanger
{
    display: flex;
    gap: 2rem;
    justify-content: center;
}
.quantityChanger > div
{
    background-color: #bbb;
    padding: .5rem;
    width: 42px;
    text-align: center;
    line-height: 32px;
}


.colorChanger
{
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.colorChanger > div
{
    background-color: #646464;
    padding: .5rem;
    width: 42px;
    height: 42px;
    text-align: center;
    line-height: 32px;
}
.colorChanger > div.selected
{
    outline: 2px solid black;
    outline-offset: 1px;
}


.hidden,
[hidden]
{
    display: none;
}




input
{
    margin: 0;
    background-color: var(--color-input) !important;
}


header
{
    display: grid;
    grid-template-columns: 5rem 1fr 5rem;
    place-items: center;
    border-bottom: .1rem solid var(--color-text);
}
header > div:nth-child(1)
{
    width: 100%;
    text-align: center;

}
header > div:nth-child(2)
{

}
.menu
{
    width: 100%;
}
.menu-handler
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .4rem;
}
.menu-handler > div
{
    height: .8rem;
    background-color: var(--color-secondary);
}
.menu-content
{
    display: none;
    position: absolute;
    background-color: var(--color-primary);
    color: var(--color-text);
    width: max-content;
    padding: 1rem;
    right: 0;
    z-index: 10;
}
.menu-content ul
{
    list-style-type: none;
}
.menu-content li
{
    background-color: var(--color-secondary);
    padding: 1rem;
}
.menu.open .menu-content
{
    display: block;
}

a,
a:visited
{
    color: var(--color-secondary-text);
}

article
{
    padding: 1rem;
}

.options-list
{
    list-style-type: none;
}
.options-list li
{
    background-color: var(--color-secondary);
}
.options-list label
{
    display: grid;
    grid-template-columns: 1fr .5fr;
}












.control
{
    position: sticky;
    bottom: 0;
    max-width: 360px;
    margin: 0 auto;
    background-color: var(--color-bg);
    padding-top: 1rem;
}
.control > *
{
    display: flex;
    gap: 1rem;
}
.control > div:first-child
{

}
.control > div:last-child
{
    justify-content: space-around;
}
.btn
{
    padding: 0 1.0rem;
    background-color: var(--color-btn);
    border-color: var(--color-btn);
    margin: 0;
}

#barcode-reader
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);
}

#share-container
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);
}
#share-container ul
{
    list-style-type: none;
}
#share-container ul li
{
    display: flex;
}
#share-container ul li > div:first-child
{
    flex-grow: 1;
}

#settings
{
    padding: 0.5rem;
}

#settings legend
{
    margin-bottom: 0;
}
#settings input,
#settings label
{
    margin-bottom: .2rem;
}

article > p
{
    font-weight: bold;
}
article i
{
    font-size: 1.2rem;
}
.options-grid
{
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    grid-gap: 1rem;
}