/* Generic values */
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
html
{
    color: rgb(51, 51, 51);
    font-family: "Lato", sans-serif;

    *
    {
        box-sizing: border-box;
        margin: 0;
    }
}

:root
{
    --primary: 0, 137, 159;
    --secondary: 243, 112, 50;

    --green: 49, 148, 0;
    --orange: 242, 145, 7;
    --red: 230, 0, 0;

    --shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

    --fill: 1;
    --width-wrap: min(100%, 250px);
}

.w100
{
    width: 100%;
}

.w75
{
    width: 75%;
}

.w50
{
    width: 50%;
}

.w25
{
    width: 25%;
}

.h100
{
    height: 100%;
}

.hidden
{
    display: none;
}

/* Flexbox */
.flex
{
    display: -webkit-box;
    display: flex;
}

.hor-center
{
    justify-content: center;
}

.hor-right
{
    justify-content: end;
}

.hor-left
{
    justify-content: start;
}

.ver-center
{
    align-items: center;
}

.dir-column
{
    -webkit-box-orient: vertical;
    flex-direction: column;
}

.fill
{
    flex: var(--fill);
}

.wrap
{
    flex-flow: row wrap;

    div
    {
        &.fill
        {
            min-width: var(--width-wrap);
        }
    }
}

.nowrap
{
    &>div
    {
        min-width: 0;
    }
}

.space-evenly
{
    justify-content: space-evenly;
}

.space-between
{
    justify-content: space-between;
}

.space-around
{
    justify-content: space-around;
}

.gap
{
    gap: 10px;
}

/* Positions */
.fixed
{
    position: fixed;
}

.absolute
{
    position: absolute;
}

.relative
{
    position: relative;
}

/* Buttons */
button
{
    cursor: pointer;
    border-radius: 5px;
    padding: 10px;
    color: whitesmoke;
    outline: none;
    transition: all 0.1s linear;

    background-color: rgb(var(--primary));
    border: 1px solid rgb(var(--primary));

    &:hover
    {
        color: rgb(var(--primary));
        background-color: transparent;
    }

    &[type="submit"]
    {
        font-size: 15px;
    }

    &.secondary
    {
        background-color: rgb(var(--secondary));
        border: 1px solid rgb(var(--secondary));

        &:hover
        {
            background-color: transparent;
            color: rgb(var(--secondary));

            path
            {
                color: rgb(var(--secondary));
            }
        }
    }

    &.create
    {
        background-color: rgb(var(--green));
        border: 1px solid rgb(var(--green));

        &:hover
        {
            background-color: transparent;
            color: rgb(var(--green));

            path
            {
                color: rgb(var(--green));
            }
        }
    }
    &.update
    {
        background-color: rgb(var(--orange));
        border: 1px solid rgb(var(--orange));

        &:hover
        {
            background-color: transparent;
            color: rgb(var(--orange));

            path
            {
                color: rgb(var(--orange));
            }
        }
    }
    &.delete
    {
        background-color: rgb(var(--red));
        border: 1px solid rgb(var(--red));

        &:hover
        {
            background-color: transparent;
            color: rgb(var(--red));

            path
            {
                color: rgb(var(--red));
            }
        }
    }
}

/* Inputs */
input, select, textarea
{
    border-radius: 5px;
    padding: 5px 10px;
    border: rgb(224, 224, 224) 1px solid;
    background-color: white;
    outline: none;
}

/* Forms */
[id^="live"]
{
    >form
    {
        display: flex;
        flex-direction: column;
    }
}

form
{
    >div
    {
        margin: 10px 0;
        display: flex;
        flex-flow: row wrap;
        gap: 10px;

        >div
        {
            flex: var(--fill);
            min-width: var(--width-wrap);
        }
    }

    span
    {
        &:hover
        {
            cursor: pointer;
        }
    }

    input:not([type="radio"]), select, textarea
    {
        width: 100%;

        &:focus
        {
            border: rgb(var(--primary)) 1px solid;
        }
    }

    textarea
    {
        resize: vertical;
        min-height: 100px;
    }

    input[type="checkbox"]
    {
        width: initial;
    }
    
    input[type="submit"],  button[type="submit"]
    {
        width: 100%; 
    }

    input.error
    {
        border: 1px rgb(var(--red)) solid;
    }

    label.error
    {
        color: rgb(var(--red));
    }
}

/* Links */
a
{
    cursor: pointer;
    color: rgb(var(--primary));
    text-decoration: none;

    &:hover
    {
        text-decoration: underline;
    }
}

/* Lists */
ul
{
    list-style: none;
}

/* Textareas */
textarea
{
    resize: none;
}

.resize-hor
{
    resize: horizontal;
}

.resize-ver
{
    resize: vertical;
}

/* Texts */
.text-center
{
    text-align: center;
}

.text-right
{
    text-align: right;
}

.text-left
{
    text-align: left;
}

.hide-text-overflow
{
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

/* Separators */
hr
{
    color: rgba(var(--primary), 0.3);
}

/* Restrictions */
*:disabled, .disabled
{
    cursor: not-allowed;
}

/* Table */
table
{
    border-collapse: collapse;
}

table > thead > tr > *, table > tbody > tr > *
{
    border: 1px solid black;
}

/* Infos bubble */
.infos
{
    background-color: rgba(var(--primary), .3);
    border-radius: 5px;
    padding: 10px;
}

/* Colors */
.color-primary
{
    color: rgb(var(--primary));
}

.color-secondary
{
    color: rgb(var(--secondary));
}