@import './variables.css';
@import './containers.css';

/* Styling the navigation elements */
nav.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.img-button, .sqr-button, .scoll-button {
    height: var(--buttonSize);
    width: var(--buttonSize);
    border-radius: 50%;
    box-shadow: 5px 5px 8px var(--shadowDark), -5px -5px 8px var(--shadowLight);
    padding: 0.25rem;

    /* -webkit-touch-callout: none !important; */
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    touch-action: none !important;  /* disables the zoom on double-tap */
}

.img-button:active {
    box-shadow: inset 4px 4px 8px var(--shadowDark), inset -4px -4px 8px var(--shadowLight);
}

.auto-margin-left {
    margin-left: auto !important;
}

.auto-margin-right {
    margin-right: auto !important;
}

.sqr-button {
    border-radius: 8px;
    margin-right: 0;
}

.spin-button-round {
    position: absolute;
    top: 50%;
    left: 1rem;
    border: none;
    border-radius: 50%;
    height: var(--buttonSize);
    width: var(--buttonSize);
    background-color: rgba(0, 0, 0, 0.2);
    color:white;
    font-size: 1.5rem;
}

.spin-button-round:last-child {
    left: 83%;
}

.img-button img {
    height: 100%;
}

.img-button[disabled],
.img-button[disabled] svg,
.scoll-button[disabled],
.sqr-button[disabled] {
    fill: var(--bg1);
    filter: contrast(0.15) grayscale(1);
    box-shadow: unset;
}

.img-button.dummy {
    opacity: 0;
}

#imgSettings.img-button {
    margin-left: auto;
}

#imgCloseSettings, #imgCalcSettings, #imgCloseCalcSettings {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

#imgClose, #imgCloseCalc, #imgCloseHelp {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

/* Styling all input controls */
.control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.5rem;
    border-radius: 8px;
    background: none;
    box-shadow: inset 4px 4px 8px var(--shadowDark), inset -4px -4px 8px var(--shadowLight);
    color:var(--text-color);
    font-size: 1rem;
}

.spin {
    height: var(--buttonSize);
    justify-content: space-between;
}

.control#divArea * {
    color: var(--accent-color);
    font-weight: bold;
}

#inpArea:not([disabled], :focus):placeholder-shown ~ label {
    color: var(--requiredColor);
}

.svg-icon,
.canvas-icon {
    position: absolute;
    right: 0.25rem;
    height: 1.75rem;
    width: 1.75rem;
    cursor: pointer;
    z-index: 101;
}

.canvas-icon {
    display: block;
    right: 0.5rem;
    bottom: 1rem;
}

.svg-icon.visible {
    display: block !important;
}

.control .svg-icon {
    display: none;
}

.svg-icon[disabled] svg {
    fill: var(--disabled-color);
}

.control:has(input[type="search"]) .svg-icon {
    display: block;
    right: 0.5rem;
    height: 1.25rem;
    width: 1.25rem;
}

.control:has(input[type="search"]:not(:placeholder-shown)) .svg-icon,
.control:has(input[type="search"]:focus) .svg-icon {
    display: none;
}

.control span.unit {
    position: absolute;
    right: 0.75rem;
    width: auto;
}

.svg-icon + span.unit,
.control.computed span.unit {
    min-width: 3.25rem;
}

.control span.spinner {
    height: calc(100% - 16px);
    aspect-ratio: 1/1;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.control span.spinner.arrow-left {
    border-right: 12px solid var(--accent-color);
}

.control span.spinner.arrow-right {
    border-left: 12px solid var(--accent-color);
}

.control span.spinner ~ input {
    width: 2rem;
    text-align: center;
    padding-right: 0;
}

.control:has(input[disabled]) span.arrow-right {
    border-left: 12px solid var(--disabled-color);
}

.control:has(input[disabled]) span.arrow-left {
    border-right: 12px solid var(--disabled-color);
}

.control input {
    position: absolute;
    top: 2px;
    left: 32px;
    border: none;
    background: none;
    height: calc(100% - 4px);
    width: calc(100% - 36px);
    outline: none;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 150ms ease-in;
    z-index: 1; /* must be in front of label! */
}

.control input[type=time] {
    text-align: right;
    width: calc(100% - 20px);
    left: 12px;
}

.control input[type=time]::-webkit-calendar-picker-indicator {
    margin-right: 4rem;
    margin-left: 0.75rem;
}

.control input[type=date]::-webkit-calendar-picker-indicator {
    margin-right: 1rem;
}

.control input#inpCurrentDate {
    position: relative;
    font-size: 1.33rem;
    font-family: inherit;
    /* width: calc(100% - 2 * var(--buttonSize) - 20px); ??? doesn't work! */
    width: 12rem !important;
    left: 0 !important;
}

.control input::placeholder {
    text-align: center;
}

.control input:required ~ label, 
.control select:required ~ label,
.control select:required:invalid {
    color: var(--requiredColor);
}

.control select:required:invalid ~ .unit {
    color: var(--requiredColor) !important;
}

.control select:required:invalid:focus {
    color: inherit !important;
}

.control select:valid ~ label {
    color: inherit;
}

/* must be BEFORE next assignment due to: label[for="inpSiteID"] */
.control label {
    position: absolute;
    top: 25%;
    left: 1.75rem;
    font-size: 1rem;
    transition: top 200ms ease-in-out,
                left 200ms ease-in-out,
                font-size 200ms ease-in;
    color: var(--disabled-color);
}

.control input:focus ~ label,
.control input:not(:placeholder-shown, :focus) ~ label,
label[for="inpSiteID"] {
    top: -45%;  /* 50% */
    left: 1rem;
    font-size: 0.75rem;
    color:var(--theme-color);
}

.control input:focus ~ .svg-icon {
    display: block;
}

.control input:disabled,
.control input:disabled ~ label,
.control input:disabled ~ span.unit {
    color: var(--disabled-color);
    /* filter: contrast(0.1) brightness(0.75); */
    top: unset;
    font-size: 1rem;
}

.control input:disabled {
    text-align: right;
    padding-right: 4rem;
}

.control:has(input:disabled) {
    box-shadow: 4px 4px 8px var(--shadowDark), -4px -4px 8px var(--shadowLight);
}

.control.dropdown-list {
    position: relative;
    border: 1px solid var(--shadowDark);
    box-shadow: 4px 4px 6px var(--shadowDark), -0px 0px 0px var(--shadowLight);
}

.control:has(select)::after {
    position: absolute;
    content: "";
    right: 0.5rem;
    pointer-events: none;
    border-top: 9px solid var(--accent-color);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

.control:has(select.select-unit:first-child)::after {
    right: 51%;
}

.control:has(select[disabled])::after {
    border-top: 9px solid var(--disabled-color);
}

.control select {
    width: 100%;
    background-color: transparent;
    padding: 0 1.75rem;
    color: var(--text-color);
    border: none;
    outline: none;
    appearance: none;
    font-size: 1.05rem;
    z-index: 1;
}

.control .right-to-left {
    direction: rtl;
    padding-right: 2.5rem;
}

.right-aligned {
    text-align: end;
    padding-right: 4rem;
}

.control:has(select:active:not(:disabled)) {
    box-shadow: inset 4px 4px 8px var(--shadowDark), inset -4px -4px 8px var(--shadowLight);
}

.control textarea {
    border: none;    
    background: none;
    outline: none;
    padding: 0.5rem;
    width: 100%;
    max-height: 17rem;
    overflow-y: auto !important;
    font-family: inherit;
    font-size: 1rem;
    touch-action: manipulation; /* disables the zoom on double-tap */
}

.control textarea:required::placeholder {
    color: var(--requiredColor);
}

.control:has(textarea) {
    height: auto;
}

.control:has(canvas) {
    height: 35vh;
    position: relative;
}

.control canvas {
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: 8px;
    background-color: lightblue;
}

.control canvas[disabled] {
    background-color: var(--disabled-color);
}

.control:has(canvas) span {
    position: absolute;
    bottom: 1rem;
    right: 2.5rem;
    color: var(--disabled-color);
}

.computed {
    border-radius: 8px;
    color: var(--theme-color);
    background-color: lightblue;
}

.computed input,
.computed label,
.computed select,
.computed .unit {
    color: var(--theme-color) !important;
    filter: unset !important;
    font-size: 1rem !important;
    font-weight: bold;    
}

.control.computed input {
    text-align: right;

}

.control.computed:has(.unit) input {
    padding-right: 4rem;
}

.control.computed:not(:has(.unit)) input {
    padding-right: 1rem;
}

.control.computed:has(img.icon) input {
    padding-right: 2.5rem;
}

.icon {
    position: absolute;
    right: 0.75rem;
    height: 1.5rem;
    width: 1.5rem;
    z-index: 101;
}

.pen {
    position: absolute;
    right: 1rem;
    cursor: pointer;
}

.control.computed .icon {
    display: block;
    position: absolute;
    right: 0.5rem;
}

.control.computed label {
    top: unset !important;
}

/* ################################################################################## */
input.slider {
    height: auto; 
    min-width: 6rem;
    width: 6rem;   
    appearance: none;
    background-color: transparent;
    box-shadow: inset 4px 4px 8px var(--shadowDark), inset -4px -4px 8px var(--shadowLight);
    border-radius: 12px;
}

/***** Chrome, Safari, Opera, and Edge Chromium *****/
input.slider::-webkit-slider-thumb  {
     /* Override default look: */
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--accent-color);
    height: 1.15rem;
    width: 1.15rem;
    border-radius: 50%;
    box-shadow: 4px 4px 8px var(--shadowDark), -4px -4px 8px var(--shadowLight);
}

label:has([role=switch], input[type=range]) {
    zoom: var(--switch-zoom, 1);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

label:has(input[required]:not(:valid)) {
    color: var(--requiredColor);
}

label:has(img.icon-small) {
    justify-content: unset;
}

/* styling the X-button in search fileds */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: block;
     height: 1rem;
     width: 1rem;
     padding-right: 0.5rem;
     background-size: 1rem;
     background-repeat: no-repeat;
     background-image: url('data:image/png;base64,  iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC');    
}

/* styling the cam-button (input[type=file] + label*/
#lblCapture {
    position: relative;
    display: flex;
    height: var(--buttonSize);
    width: var(--buttonSize);
}

input[type="file"][capture] {
    display: none; /* does not work correct for forms! */
    /* opacity: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0; */
}

#imgSnapshot {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

  
input[role=switch] {
    --switch-handle-size: 8px;
    --switch-bg-size: 24px;
    --switch-handle-gap: 2px;
    --switch-bg: color-mix(in srgb, var(--accent-color) 20%, transparent);
    
    appearance: none;
    -webkit-appearance: none;
    box-sizing: content-box;
    display: inline-flex;
    padding-inline: 0 var(--switch-bg-size);
    border: none;
    height: auto;
    width: auto;    
    font-size: 0;
    margin: 0;
    margin-left: auto;
    border-radius: 100px;
    box-shadow: inset 4px 4px 8px var(--shadowDark), inset -4px -4px 8px var(--shadowLight);
    transition: var(--switch-duration, 125ms) cubic-bezier(.65, 0, .5, 1);;
    user-select: none;
    outline: none;
    filter: grayscale(1);  /* de-colorize the switch */
    cursor: pointer;
}
  
input[role=switch]:checked {
    padding-inline: var(--switch-bg-size) 0;
    filter: none;
}
  
input[role=switch]::before {
    content: '';
    padding: var(--switch-handle-size);
    margin: var(--switch-handle-gap);
    background: var(--accent-color);
    border-radius: 50%;
    transition: inherit;
}

/* styling the switch button in disabled shape! */
label[disabled]:has(input[role=switch]) input[role=switch] {
    filter: none !important;
}
label[disabled]:has(input[role=switch]) input[role=switch]::before {
    background: var(--disabled-color);
}

input[role=switch]:first-child {
    margin-left: 0;
}

input[role=buddy],
.control.input-short input {
    left: 4px;
    width: calc(100% - 4px);
    border: none;
    outline: none;
    text-align: center;
    padding-left: 4px;
    padding-right: 3rem !important;
}

label .input-dropbox {
    width: 9rem;
    margin-left: auto;
    justify-content: space-between;
}

label .input-dropbox :first-child, 
label .input-dropbox :last-child {
    width: 50%;
}

.input-short,
label:has(.control:last-child) .control {
    width: 6.5rem;
    min-width: 6.5rem;
    margin-left: auto;
}

label .control:last-child:has(select) {
    position: relative;
    min-width: 11rem;
    display: flex;
    justify-content: space-between;
}


label .control.unit-dropdown {
    min-width: 9.5rem !important;
}

label .control.unit-dropdown input:first-child {
    width: 48% !important;
    min-width: unset !important;
    margin: 0 !important;
    padding-right: 0.5rem !important;
    text-align: right;
}

label .control.unit-dropdown input:nth-child(2) {
    right: 0;
    width: 52%;
    margin-left: auto;
    padding-left: 0;
    padding-right: 1.5rem !important;
}

label .control.unit-dropdown select {
    border-bottom-right-radius: 8px !important;
    border-left: 1px solid #bbb;
    width: 50% !important;
    min-width: unset !important;
}

label .control.unit-dropdown select.select-unit {
    padding-left: 0.5rem;
}

label .control:last-child:has(select) select {
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    padding: 0 0.5rem;
    direction: ltr;
    box-shadow: 4px 4px 8px var(--shadowDark), 0px -4px 8px var(--shadowLight);
}

label .control>select:first-child {
    left: 0;
    border-left: none;
    border-right: 1px solid #bbb;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: none !important;
}

/* .control:last-child span.unit {
    min-width: auto;
    right: 0.66rem;
    text-align: right;
} */

label.left-aligned {
    justify-content: left !important;
}

.control-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.control-box:has(.control > input[required]:not(:valid)) > label:first-child {
    color: tomato;
}

.rem12 {
    width: 12rem !important;
}

.rem8 {
    width: 8rem !important;
}

.rem8 input[disabled],
.rem12 input[disabled] {
    text-align: center;
    padding-right: 1rem !important;
}