@tailwind components;
@tailwind utilities;

/*!
 * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 * using two icons
 */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../../fonts/fa-solid-900.woff2") format("woff2"), url("../../fonts/fa-solid-900.ttf") format("truetype"); }

/* universal */
* {
  box-sizing: border-box;
}

/* variables */
:root {
  --background: radial-gradient(circle at 18.7% 37.8%, #fafafa 0%, #e1eaee 90%);
  /* colors */
  --primary: theme(colors.primary.light);
  --secondary: theme(colors.secondary.light);
  --tertiary: theme(colors.tertiary.light);
  --success: theme(colors.success.light);
  --warning: theme(colors.warning.light);
  --danger: theme(colors.danger.light);
  --dark: theme(colors.dark.light);
  --medium: theme(colors.medium.light);
  --light: theme(colors.light.light);
  /* text colors */
  --primary-text: #fff;
  --secondary-text: #000;
  /* misc */
  --btn-height: 32px;
  --glass-background: rgb(0 0 0 / 0.35);
}

/* dark mode */
.dark {
  --background: radial-gradient(circle at 18.7% 37.8%, #000 0%, #222 90%);
  /* dark mode colors */
  --primary: theme(colors.primary.dark);
  --secondary: theme(colors.secondary.dark);
  --tertiary: theme(colors.tertiary.dark);
  --success: theme(colors.success.dark);
  --warning: theme(colors.warning.dark);
  --danger: theme(colors.danger.dark);
  --dark: theme(colors.dark.dark);
  --medium: theme(colors.medium.dark);
  --light: theme(colors.light.dark);
  /* dark mode text colors */
  --primary-text: #000;
  --secondary-text: #fff;
  /* dark mode glass */
  --glass-background: rgb(255 255 255 / 0.35);
}

/* selection */
::selection {
  background-color: var(--dark);
  color: var(--light);
}

/* tags */
html {
  @apply leading-[1.15];
  -webkit-text-size-adjust: 100%;
}

body {
  @apply bg-deltaTheme m-0 font-ibm grid min-h-screen grid-rows-[auto_1fr_auto];
}

h6, h5, h4, h3, h2, h1 {
  @apply font-vt233;
}

h1 {
  @apply m-[0.67em_0] text-[2em];
}

hr {
  @apply box-content h-0;
}

code,
kbd samp,
pre {
  @apply font-monoFont text-[1em];
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

b,
strong {
  @apply font-[bolder];
}

small {
  @apply text-[80%];
}

sub,
sup {
  @apply relative align-baseline text-[75%] leading-[0];
}

sub {
  @apply -bottom-1;
}

sup {
  @apply -top-2;
}

button,
input,
optgroup,
select,
textarea {
  @apply m-0 leading-[1.15] font-[inherit] text-[100%];
}

button,
input {
  @apply overflow-visible;
}

button,
section {
  @apply normal-case;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  @apply border-none p-0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  @apply p-[0.35rem_0.75rem_0.635rem];
}

legend {
  @apply box-border table max-w-full p-0 whitespace-normal;
  color: inherit;
}

progress {
  @apply align-baseline;
}

textarea {
  @apply overflow-auto;
}

[type="checkbox"],
[type="radio"] {
  @apply box-border p-0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  @apply h-auto;
}

[type="search"] {
  @apply -outline-offset-2;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  @apply block
}

summary {
  @apply list-item;
}

/* icons */
.icon {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: 'Font Awesome 6 Free';
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

.icon-sun::before {
  content: "\f185";
}

.icon-moon::before {
  content: "\f186";
}

/* text color */
.primary-txt {
  color: var(--primary);
}

.secondary-txt {
  color: var(--secondary);
}

.tertiary-txt {
  color: var(--tertiary);
}

.success-txt {
  color: var(--success);
}

.warning-txt {
  color: var(--warning);
}

.danger-txt {
  color: var(--danger);
}

.dark-txt {
  color: var(--dark);
}

.medium-txt {
  color: var(--medium);
}

.light-txt {
  color: var(--light);
}

/* layout */
.container {
  @apply m-2;
}

.mansory {
  columns: 5 320px;
  @apply gap-2;
}

.container-grid {
  @apply grid gap-[0.8rem];
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* glass */
.glass {
  @apply bg-[var(--glass-background)] rounded-[20px] backdrop-blur-sm;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* alert */
.alert {
  @apply invisible mr-32 text-center fixed min-w-[250px] z-[1] right-[5%] bottom-[10vh] text-[1.05em] rounded-[20px] backdrop-blur opacity-50;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.alert__show {
  @apply visible animate-popup;
}

.alert-primary {
  background-color: var(--primary);
  color: var(--primary-text);
}

.alert-secondary {
  background-color: var(--secondary);
  color: var(--primary-text);
}

.alert-tertiary {
  background-color: var(--tertiary);
  color: var(--primary-text);
}

.alert-success {
  background-color: var(--success);
  color: var(--primary-text);
}

.alert-warning {
  background-color: var(--warning);
  color: var(--secondary-text);
}

.alert-danger {
  background-color: var(--danger);
  color: var(--primary-text);
}

.alert-dark {
  background-color: var(--dark);
  color: var(--primary-text);
}

.alert-medium {
  background-color: var(--medium);
  color: var(--primary-text);
}

.alert-light {
  background-color: var(--light);
  color: var(--secondary-text);
}

/* accordion */
.accordion {
  @apply cursor-pointer p-2.5 my-2;
}

.accordion-header {
  background-color: rgba(255, 255, 255, 0.4);
  color: var(--secondary-text);
  @apply p-1 rounded-[10px];
}

.accordion-header::marker {
  color: var(--primary-text);
  @apply text-[20px];
}

.accordion-body {
  background-color: rgba(0, 0, 0, 0.2);
  @apply p-3 m-2;
}

.input-field {
  border: none;
}

.input-field-text {
  all: unset;
  border-bottom: 1px solid var(--primary-text);
  @apply cursor-auto;
}

.input-field-text::placeholder {
  color: var(--primary-text);
  @apply pr-2;
}

.input-field-select {
  background-color: rgba(146, 148, 156, 0.25);
  @apply max-w-full py-2;
}

.input-field-check {
  accent-color: var(--secondary);
}

/* navbar */
.navbar {
  @apply flex items-center justify-between p-2 m-[12px_8px];
  flex-flow: row wrap;
}

.navbar-bars, .navbar-bars::before, .navbar-bars::after {
  @apply block relative max-w-full h-1;
  background-color: var(--primary-text);
}

.navbar-bars::before, .navbar-bars::after {
  content: "";
}

.navbar-bars {
  @apply top-2.5;
}

.navbar-bars::before {
  @apply top-2;
}

.navbar-bars::after {
  @apply -top-2.5;
}

.navbar-brand {
  @apply flex gap-2 items-center;
  color: var(--primary-text);
}

.navbar-brand-image {
  @apply block h-8;
}

.navbar-menu {
  @apply my-0 flex list-none gap-[0.8rem];
}

.navbar-menu-btn {
  @apply hidden h-[26px] w-[26px];
}

.navbar-menu-link {
  color: var(--primary-text);
}

.navbar-change-theme {
  @apply flex pr-2 ml-auto;
}

/* buttons */
.btn {
  all: unset;
  height: var(--btn-height);
  @apply cursor-pointer max-w-full;
}

.btn:disabled {
  outline: 2px solid #888;
  color: #888;
}

.btn-primary {
  outline: 2px solid var(--primary);
  color: var(--primary);
}

.btn-secondary {
  outline: 2px solid var(--secondary);
  color: var(--secondary);
}

.btn-tertiary {
  outline: 2px solid var(--tertiary);
  color: var(--tertiary);
}

.btn-success {
  outline: 2px solid var(--success);
  color: var(--success);
}

.btn-warning {
  outline: 2px solid var(--warning);
  color: var(--warning);
}

.btn-danger {
  outline: 2px solid var(--danger);
  color: var(--danger);
}

.btn-dark {
  outline: 2px solid var(--dark);
  color: var(--dark);
}

.btn-medium {
  outline: 2px solid var(--medium);
  color: var(--medium);
}

.btn-light {
  outline: 2px solid var(--light);
  color: var(--light);
}

/* cards */
.card {
  @apply p-2;
}

.card-header {
  @apply my-0 text-center;
}

.card-body {
  @apply m-2;
}

.card-footer {
  border-top: 1px solid #ddd;
  @apply mt-2.5;
}

.card-image {
  @apply block rounded-[505] drop-shadow-[0_0_0.55rem_var(--white-text)] h-64 mx-auto object-cover w-64;
}

.card-title {
  font-weight: bold;
  @apply text-[2em] py-3;
}

/* modal */
.modal {
  @apply text-light-light;
}

.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-close {
  @apply text-light-light cursor-pointer;
}

/* footer */
.footer {
  border-top: 1px solid var(--primary-text);
}

/* screen */
@media (orientation: portrait) and (max-width: 649px) {
  .navbar-menu {
    @apply flex-col hidden mt-3;
    flex-basis: 100%;
  }
  
  .navbar-menu__active {
    @apply flex;
  }
  
  .navbar-menu-btn {
    @apply block;
  }
  
  .navbar-menu-item {
    @apply text-center;
  }
}

/* hover */
@media (hover: hover) {
  .btn:hover:disabled {
    background: none;
    color: #888;
  }

  .btn-primary:hover {
    background-color: var(--primary);
    color: var(--primary-text);
  }
  
  .btn-secondary:hover {
    background-color: var(--secondary);
    color: var(--primary-text);
  }
  
  .btn-tertiary:hover {
    background-color: var(--tertiary);
    color: var(--primary-text);
  }
  
  .btn-success:hover {
    background-color: var(--success);
    color: var(--primary-text);
  }
  
  .btn-warning:hover {
    background-color: var(--warning);
    color: var(--secondary-text);
  }
  
  .btn-danger:hover {
    background-color: var(--danger);
    color: var(--primary-text);
  }
  
  .btn-dark:hover {
    background-color: var(--dark);
    color: var(--primary-text);
  }
  
  .btn-medium:hover {
    background-color: var(--medium);
    color: var(--primary-text);
  }
  
  .btn-light:hover {
    background-color: var(--light);
    color: var(--secondary-text);
  }

  .navbar-menu-link:hover {
    @apply underline;
  }
  
  .navbar-brand:hover {
    filter: drop-shadow(0 0 0.55rem var(--secondary-text));
  }
  
  .modal-close:hover {
    filter: invert(0.5);
  }
}

/* print */
@media print {
  .print-hidden {
    display: none;
  }
}

/* animations */
@keyframes fadein {
  from {
    @apply bottom-0 opacity-0;
  }
  to {
    @apply bottom-[30px] opacity-100;
  }
}

@keyframes fadeout {
  from {
    @apply bottom-[30px] opacity-100;
  }
  to {
    @apply bottom-0 opacity-0;
  }
}