/* style.css */
@import url('https://cdn.phi.it/basic/css/base.css');

/* <body> */
body{
    background-color: var(--lightestColor);
    color: var(--darkestColor);
    --rootTextColor: var(--darkestColor);
    --rootBackgroundColor: var(--lightestColor);
}

body[data-theme="dark"]{
    background-color: var(--darkestColor);
    color: var(--lightestColor);
    --rootTextColor: var(--lightestColor);
    --rootBackgroundColor: var(--darkestColor);
}

/* <a> */
a{
    text-decoration: none;
    color: var(--linkColor);
}

a:hover{ text-decoration: underline }

/* <h1> */
h1{
    font-size: 2.1em;
    margin-bottom: 1em;
}

/* <h2> */
h2{
    font-size: 1.3em;
    font-weight: 500;
    margin-bottom: 1em;
}

h1 + h2{ margin-top: -1em }

/* <button> */
button{
    border: 0;
    outline: 0;
    padding: 1em 2em;
    font-weight: 500;
    font-size: .9em;
    border-radius: 1.1em;
    --backgroundColor: var(--primaryColor);
    --textColor: var(--buttonTextColor);
    background-color: var(--backgroundColor);
    border: .1em solid var(--backgroundColor);
    color: var(--textColor);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

button[data-importance="secondary"]{
    color: var(--backgroundColor);
    background-color: transparent;
}

button[data-type="success"]{ --backgroundColor: var(--successColor) }
button[data-type="warning"]{ --backgroundColor: var(--warningColor) }
button[data-type="danger"]{ --backgroundColor: var(--dangerColor) }

button[data-type="light"]{
    --backgroundColor: var(--lowContrastColor);
    --textColor: var(--rootTextColor);
}

button[data-type="light"][data-importance="secondary"]{ --backgroundColor: var(--highContrastColor) }
body[data-theme="dark"] button[data-type="light"][data-importance="secondary"]{ --backgroundColor: var(--rootTextColor) }

.container > button,
form > button{ width: 100% }

button ion-icon{
    margin-right: .5em;
    font-size: 1.2em;
}

:is(p) + button{ margin-top: 1em }

/* <class="flex"> */
.flex{
    display: flex;
    align-items: center;
}

.flex > *:not(input[type="checkbox"]):not(input[type="radio"]){
    flex: 1;
    width: 100%;
}

form .flex > :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, label){ width: 100% }
.flex > :not(:last-child){ margin-right: 1em }
p + .flex{ margin-top: 2em }

/* <table> */
table{
    width: 100%;
    border-collapse: collapse;
}

table thead{
    color: var(--tableTextColor);
    font-weight: 500;
}

table thead > tr > :is(td, th){ background-color: var(--primaryColor) }
table thead > tr > :is(td, th):first-child{ border-top-left-radius: 1em }
table thead > tr > :is(td, th):last-child{ border-top-right-radius: 1em }
table tr > :is(th, td){ padding: .8em }

table tbody > tr > :is(td, th){
    border: 1px solid var(--lowContrastColor);
    background-color: var(--lowerContrastColor);
}

table tbody > tr:nth-child(even) > :is(td, th){ background-color: var(--lowContrastColor) }
table tbody > tr:last-of-type > :is(td, th):first-child{ border-bottom-left-radius: 1em }
table tbody > tr:last-of-type > :is(td, th):last-child{ border-bottom-right-radius: 1em }

/* Margin */
[margin-bottom="low"]{ margin-bottom: .5rem }
[margin-bottom="medium"]{ margin-bottom: 1.2rem }
[margin-bottom="high"]{ margin-bottom: 2.2rem }

[margin-left="low"]{ margin-left: .5rem }
[margin-left="medium"]{ margin-left: 1.2rem }
[margin-left="high"]{ margin-left: 2.2rem }

[margin-top="low"]{ margin-top: .5rem }
[margin-top="medium"]{ margin-top: 1.2rem }
[margin-top="high"]{ margin-top: 2.2rem }

[margin-right="low"]{ margin-right: .5rem }
[margin-right="medium"]{ margin-right: 1.2rem }
[margin-right="high"]{ margin-right: 2.2rem }

[margin="low"]{ margin: .5rem }
[margin="medium"]{ margin: 1.2rem }
[margin="high"]{ padding: 2.2rem }

/* Padding */
[padding-bottom="low"]{ padding-bottom: .5rem }
[padding-bottom="medium"]{ padding-bottom: 1.2rem }
[padding-bottom="high"]{ padding-bottom: 2.2rem }

[padding-left="low"]{ padding-left: .5rem }
[padding-left="medium"]{ padding-left: 1.2rem }
[padding-left="high"]{ padding-left: 2.2rem }

[padding-top="low"]{ padding-top: .5rem }
[padding-top="medium"]{ padding-top: 1.2rem }
[padding-top="high"]{ padding-top: 2.2rem }

[padding-right="low"]{ padding-right: .5rem }
[padding-right="medium"]{ padding-right: 1.2rem }
[padding-right="high"]{ padding-right: 2.2rem }

[padding="low"]{ padding: .5rem }
[padding="medium"]{ padding: 1.2rem }
[padding="high"]{ padding: 2.2rem }

/* <form> */
form button,
form :is(input:not([type="checkbox"]), textarea, select, .input--group){
    max-width: 100%;
    margin-bottom: 1em;
}

/* <input> */
input:not([type="checkbox"]), select, textarea, .input--group{
    width: 100%;
    outline: 0;
    resize: none;
    border: 1px solid var(--inputBorderColor);
    background-color: var(--inputBackgroundColor);
    padding: .8em 1em;
    font-size: 1em;
    border-radius: 1.1em;
    display: block;
    color: var(--inputTextColor);
}

:is(input, textarea)::placeholder{ color: var(--inputPlaceholderColor) }


.input--group{
    display: flex;
    align-items: center;
    padding: 0;
    padding-left: 1em;
}

.input--group :is(input:not([type="checkbox"]), textarea){
    margin: 0;
    width: 100%;
    background-color: transparent;
    border: transparent;
    padding-left: .2em;
}


.input--group > ion-icon{
    margin-right: .5em;
    width: var(--inputIconSize);
    height: var(--inputIconSize);
    min-width: var(--inputIconSize);
    min-height: var(--inputIconSize);
    max-width: var(--inputIconSize);
    max-height: var(--inputIconSize);
    color: var(--inputIconColor);
}

/* <class="loading"> */
.loading{
    position: relative;
    overflow: hidden;
    pointer-events: none;
    color: transparent !important;
    opacity: .7;
    user-select: none;
    -webkit-user-select: none;
}

.loading > *{
    visibility: hidden !important;
    color: transparent !important;
}

.loading::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1013" height="1013" viewBox="0 0 1013 1013" fill="none"><path d="M980.942 507C999.2 507 1014.11 492.183 1012.92 473.964C1007.13 385.309 978.129 299.518 928.555 225.326C872.845 141.95 793.663 76.9667 701.021 38.5931C608.378 0.219447 506.438 -9.82084 408.089 9.74186C309.741 29.3046 219.402 77.5916 148.497 148.497C77.5916 219.402 29.3046 309.741 9.74186 408.089C-9.82084 506.438 0.219448 608.378 38.5931 701.021C76.9667 793.663 141.95 872.845 225.326 928.555C299.518 978.129 385.309 1007.13 473.964 1012.92C492.183 1014.11 507 999.2 507 980.942C507 962.685 492.179 948.014 473.973 946.646C398.406 940.97 325.375 915.89 262.057 873.582C189.554 825.137 133.045 756.281 99.6755 675.719C66.306 595.158 57.575 506.511 74.5866 420.988C91.5983 335.464 133.588 256.906 195.247 195.247C256.906 133.588 335.464 91.5983 420.988 74.5866C506.511 57.575 595.158 66.306 675.719 99.6755C756.281 133.045 825.137 189.554 873.582 262.057C915.89 325.375 940.97 398.406 946.646 473.973C948.014 492.179 962.685 507 980.942 507Z" fill="black"/></svg>');
    background-size: 1.2em 1.2em;
    background-repeat: no-repeat;
    background-position: center center;
    animation: spin 2s linear infinite 0s;
}

body[data-theme="dark"] .loading::after,
body[data-theme="dark"].loading::after,
button.loading::after{ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1013" height="1013" viewBox="0 0 1013 1013" fill="none"><path d="M980.942 507C999.2 507 1014.11 492.183 1012.92 473.964C1007.13 385.309 978.129 299.518 928.555 225.326C872.845 141.95 793.663 76.9667 701.021 38.5931C608.378 0.219447 506.438 -9.82084 408.089 9.74186C309.741 29.3046 219.402 77.5916 148.497 148.497C77.5916 219.402 29.3046 309.741 9.74186 408.089C-9.82084 506.438 0.219448 608.378 38.5931 701.021C76.9667 793.663 141.95 872.845 225.326 928.555C299.518 978.129 385.309 1007.13 473.964 1012.92C492.183 1014.11 507 999.2 507 980.942C507 962.685 492.179 948.014 473.973 946.646C398.406 940.97 325.375 915.89 262.057 873.582C189.554 825.137 133.045 756.281 99.6755 675.719C66.306 595.158 57.575 506.511 74.5866 420.988C91.5983 335.464 133.588 256.906 195.247 195.247C256.906 133.588 335.464 91.5983 420.988 74.5866C506.511 57.575 595.158 66.306 675.719 99.6755C756.281 133.045 825.137 189.554 873.582 262.057C915.89 325.375 940.97 398.406 946.646 473.973C948.014 492.179 962.685 507 980.942 507Z" fill="white"/></svg>') }

body:not([data-theme="dark"]) button[data-type="light"].loading::after{ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1013" height="1013" viewBox="0 0 1013 1013" fill="none"><path d="M980.942 507C999.2 507 1014.11 492.183 1012.92 473.964C1007.13 385.309 978.129 299.518 928.555 225.326C872.845 141.95 793.663 76.9667 701.021 38.5931C608.378 0.219447 506.438 -9.82084 408.089 9.74186C309.741 29.3046 219.402 77.5916 148.497 148.497C77.5916 219.402 29.3046 309.741 9.74186 408.089C-9.82084 506.438 0.219448 608.378 38.5931 701.021C76.9667 793.663 141.95 872.845 225.326 928.555C299.518 978.129 385.309 1007.13 473.964 1012.92C492.183 1014.11 507 999.2 507 980.942C507 962.685 492.179 948.014 473.973 946.646C398.406 940.97 325.375 915.89 262.057 873.582C189.554 825.137 133.045 756.281 99.6755 675.719C66.306 595.158 57.575 506.511 74.5866 420.988C91.5983 335.464 133.588 256.906 195.247 195.247C256.906 133.588 335.464 91.5983 420.988 74.5866C506.511 57.575 595.158 66.306 675.719 99.6755C756.281 133.045 825.137 189.554 873.582 262.057C915.89 325.375 940.97 398.406 946.646 473.973C948.014 492.179 962.685 507 980.942 507Z" fill="black"/></svg>') }

/* <form-alert-box> */
form-alert-box{
    display: block;
    padding: 1em;
    width: 100%;
    font-weight: 500;
    color: var(--buttonTextColor);
    background-color: var(--dangerColor);
    text-align: left;
    border-radius: 1.1em;
}

form-alert-box[data-type="success"]{ background-color: var(--successColor) }
form-alert-box[data-type="warning"]{ background-color: var(--warningColor) }

/* <loading-bar> */
loading-bar{
    display: block;
    overflow: hidden;
    height: .5em;
    border-radius: 1em;
    width: 100%;
    border: .1px solid var(--inputBorderColor);
    --color: var(--primaryColor);
}

loading-bar loading-tile{
    height: 100%;
    display: block;
    background-color: var(--color);
}

.error{ border: 1px solid var(--dangerColor) }
