/* Tune a few basic HTML styles */

:root {
    --nathan-yellow: rgb(224, 221, 0);
    --ui-blue: rgb(127, 219, 255);
    --ui-blue-darker: rgb(110, 200, 255);
    --dark-background: rgb(17, 17, 17);
    --disabled-gray: rgb(47, 47, 47);
    --medium-gray: rgb(160, 160, 160);
    --light-border: rgb(187, 187, 187);
    --almost-white: rgb(219, 219, 219);
    --single-sunburst-offset: 400px;
    --triple-sunburst-offset-right: 18vw;
    --triple-sunburst-offset-top: 1vh;
}

/* Dark mode for the background and ensure there's no horizontal scrollbar */
body {
    background-color: var(--dark-background);
    overflow-x: hidden;
}

/* 20px space to the left and right of the text on a button */
button {
    padding: 0 20px !important;
}

/* Make the horizontal rules look a little nicer */
hr {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

/* Remove the default border */
iframe {
    border: none;
}

/* Used in HTML tooltips */
li {
    margin: 0 0;
    margin-bottom: 1px !important;
}

/* Used in Admin -> Show Git History - tighten up ul and ol */
ul {
    margin-block-start: 5px !important;
    margin-block-end: 5px !important;
}

ol {
    margin-left: 0 !important;
}

/* Make the plotly table's scroll bar visible in dark mode */
line.scrollbar-glyph {
    stroke: var(--nathan-yellow);
    stroke-opacity: 1;
}

/* Make password and regular text input fields match the rest of the UI - border dims on hover */
input[type=text]:hover, input[type=password]:hover {
    border-color: var(--medium-gray) !important;
}

/* A little space between the checkbox/radio button and its label */
input[type=checkbox], input[type=radio] {
    margin-right: 5px;
}

/* Implement dark mode in datetime and time picker inputs */
input[type=datetime-local], input[type=time] {
    color: var(--almost-white);
    background-color: var(--dark-background);
    border: 1px solid var(--almost-white);
    border-radius: 4px;
    margin-top: 5px;
    margin-left: 20px;
    line-height: 26px;
    padding: 6px 10px 6px 10px;
    width: 170px;
    font-size: 15px;
    color-scheme: dark;  /* Makes the picker popup dark */
}

 input[type=datetime-local]:hover, input[type=time]:hover {
    border-color: var(--medium-gray);
}

input[type=datetime-local]:focus, input[type=time]:focus {
    background-color: var(--dark-background);
    color: var(--almost-white);
}

/* For numeric input fields, don't show the lame up/down arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* For all other inputs (like regular text fields), use white */
input {
    color: white;
}

/* Some space around each collapsible details section */
details {
    box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
    border-radius: 5px;
    overflow: hidden;
    margin-left: 10px;
}

/* And make it open with a nice animation */

details[open] > summary:before {
    transform: rotate(90deg);
}

details[open] summary ~ * {
    animation: sweep 0.5s ease-in-out;
}

@keyframes sweep {
    0%    {opacity: 0}
    100%  {opacity: 1}
}

summary {
    padding: 1rem;
    display: block;
    padding-left: 2.2rem;
    position: relative;
    cursor: pointer;
}

summary::before {
    content: '';
    border-width: .7rem;
    border-style: solid;
    border-color: transparent transparent transparent var(--almost-white);
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    transform: rotate(0);
    transform-origin: .2rem 50%;
    transition: 0.5s transform ease;
}

summary:hover {
    color: var(--ui-blue-darker);
}