/* Display */
.d-iflex { display: inline-flex; }

/* Overflow */
.overflow-auto { overflow:auto; }

/* Positions */
.pos-sticky { position: sticky; }
.pos-relative { position: relative; }

/* Coordinates */
.top-20 { top: 2rem; }
.top-55 { top: 5.5rem; }
.top-_-075 { top: -0.75rem; }
.top-_-065 { top: -0.65rem; }
.top-_-05 { top: -0.5rem; }
.top-_-025 { top: -0.25rem; }
.top-0 { top: 0; }

.right-_-075 { right: -0.75rem; }
.right-_-05 { right: -0.5rem; }
.right-_-025 { right: -0.25rem; }
.right-0 { right: 0; }
.right-15 { right: 1.5rem;}

.left-_-075 { left: -0.75rem; }
.left-_-05 { left: -0.5rem; }
.left-_-025 { left: -0.25rem; }
.left-0 { left: 0; }
.left-025 { left: 0.25rem; }
.left-05 { left: 0.5rem; }
.left-075 { left: 0.75rem; }

/* Foreground */
.color-unset { color: unset; }
.color-light { color: var(--color-text-light); }
.color-dark { color: var(--color-text-dark); }
.color-actions-1 { color: var(--color-actions-1); }
.color-bg-default { color: var(--background-default-light); }

/* Background */
.bg-color-default { background-color: var(--background-default-light); }
.bg-color-unset { background-color: unset; }
.bg-color-1 { background-color: var(--background-color-1); } 
.bg-color-2 { background-color: var(--background-color-2); }
.bg-color-3 { background-color: var(--background-color-3); }
.bg-color-4 { background-color: var(--background-color-4); }
.bg-color-5 { background-color: var(--background-color-5); }
.bg-color-7 { background-color: var(--background-color-7); }
.bg-color-8 { background-color: var(--background-color-8); }

/* z-index */
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }

/* border */
.border-trans-1 { border: solid 1px transparent; }
.border-0 { border: none;}
.border-2 { border: solid 2px}
.border-dotted { border-style: dotted !important; }
.border-dashed { border-style: dashed !important; }

.border-color-2 { border-color: #6c757d!important; }

/* box-shadow */
.box-shadow-1 { box-shadow: 0.1rem 0.1rem 0.1rem 0.05rem var(--color-accent-2); }

/* width */
.max-w-80 { max-width: 80px; }
.max-w-300 { max-width: 3rem; }

/* height */
.h-fit { height: fit-content; }

.min-h-100 { min-height: 100dvh; }
.min-h-3 { min-height: 3rem; }

.max-h-080 { max-height: 80dvh;}

/* line-height */
.line-height-1 { line-height: 1;}

/* font-size */
.f-size-1 { font-size: 0.25rem; }
.f-size-2 { font-size: 0.5rem; }
.f-size-3 { font-size: 0.75rem; }
.f-size-4 { font-size: 1.25rem; }
.f-size-5 { font-size: 1.5rem; }
.f-size-6 { font-size: 1.75rem; }
.f-size-7 { font-size: 2rem; }

.white-space-nowrap {
  white-space: nowrap;
}

.strike-through {
  text-decoration: line-through;
}

.cursor-hand {
  cursor: pointer;
}

.cursor-help {
  cursor: help;
}

/* ### Dark Mode */
.dark .color-bg-default { color: var(--background-default-dark); }
.dark .bg-color-default {
  color: var(--color-text-dark);
  background-color: var(--background-default-dark); 
}
.dark .bg-color-1 { background-color: var(--background-color-1-dark); } 
.dark .bg-color-2 { background-color: var(--background-color-2-dark); }
.dark .bg-color-3 { background-color: var(--background-color-3-dark); }
.dark .bg-color-4 { background-color: var(--background-color-4-dark); }
.dark .bg-color-5 { background-color: var(--background-color-5-dark); }
.dark .bg-color-7 { background-color: var(--background-color-7-dark); }
.dark .bg-color-8 { background-color: var(--background-color-8-dark); }

/* Box-Shadow */
.dark .box-shadow-1 { box-shadow: unset; }

/* Border */
.dark .border-color-2 { border-color: var(--background-color-2-dark) !important; }

/* ### Components !TODO: move to it's own file*/
.min-btn-danger {
  border: unset;
  background-color: var(--background-color-1);
  color: var(--color-danger);
  -webkit-text-stroke-color: var(--color-danger);
  -webkit-text-stroke-width: 1px;
}
.min-btn-danger:hover {
  color: var(--background-color-1);
}
.min-btn-danger:focus {
  outline: unset;
}

/* ### Media Query */
@media only screen and (max-width:576px) {
  .nav-link { padding: 0.5rem 0.5rem }
  #nav-tab { font-size: 0.7rem; }
}