/*
    Anywhere 1.1
    ---
    App styles
*/

@import url("./base.css");
@import url('./components/animation.css');
@import url('./components/basic.css');
@import url('./components/advanced/option-list.css');
@import url('./components/advanced/main.css');
@import url('./components/advanced/modal.css');
@import url('./components/advanced/notification.css');

/* Variables */
:root{
    --color-white-light: #fff;
    --color-theme-light: #59a0a9;
    --color-theme-light-2: #dde9ea;
    --color-grey-light: #f7f7f9;
    --color-grey-light-1: #cdcdcd;
    --color-grey-light-2: #EDF0F4;
    --color-grey-light-3: #c7d4e6;
    --color-grey-light-4: #95bfc5;
    --color-grey-light-5: #e7eff1;
    --color-grey-medium: #4b787d;
    --color-grey-medium-2: #8cbdc2;
    --color-grey-bold: #033E46;
    --color-blue-light: #dbf5ff;
    --color-blue-bold: #2A6EBB;
    --color-green-light: #aefecf;
    --color-green-light-2: #e1ffee;
    --color-green-bold: #41cf7c;
    --color-red-light: #ffcdcd;
    --color-red-light-0: #fff1f1;
    --color-red-light-2: #ffeaea;
    --color-red-light-3: #f49292;
    --color-red-medium: #e5a1a1;
    --color-red-bold: #f25353;
    --color-orange-light: #ffddc5;
    --color-orange-bold: #ff832b;
    --color-purple-light: #e8d7ff;
    --color-purple-light-2: #f1e7fe;
    --color-purple-bold: #663399;
    --color-gold-light: #fff5cf;
    --color-gold-bold: #ffcc00;
    --shadow-1: 0 0 10px #cfcfcf;
    --shadow-2: 0 0 10px #ebeaea;
    --font-fa: 'Font Awesome 6 Pro';
    --tx-bg-cl: background .3s ease-in-out, color .3s ease-in-out;
    --tx-cl: color .3s ease-in-out;
    --tx-bg-cl-bd: background .3s ease-in-out, color .3s ease-in-out, border .3s ease-in-out;
    --tx-bg-cl-bs: background .3s ease-in-out, color .3s ease-in-out, box-shadow .3s ease-in-out;
}

/* Common transition */
.tsr-color{
    transition: background .3s ease-in-out, color .4s ease-in-out;
}

/* Common animation */
.cs{
    position: relative;
    animation: cool-show ease-in-out .3s;
}

/* App default styles */
#app{
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: none;
    align-items: center;
    justify-content: center;
}
#app[show]{
    display: flex;
}

/* sweet scroll bar */
/* Regle pour chromium */
.ssb{
    padding-right: 5px;
}
.ssb::-webkit-scrollbar{
    width: 4px;
    height: 4px;
    border-radius: 50px;
    background-color: var(--color-grey-light);
}
.ssb::-webkit-scrollbar-thumb{
    background-color: var(--color-theme-light-2);
    border-radius: 50px;
}

/* .nsi{
    -moz-appearance: textfield;
} */
.nsi::-webkit-outer-spin-button,
.nsi::-webkit-inner-spin-button{
    display: none;
}