@tailwind base;
@tailwind components;

:root {
  --opacity: 0.75;
  --text: white;
}

::-webkit-scrollbar {
  width: 0px;
  display: none;
}

::-webkit-scrollbar:horizontal {
  width: 1px;
}

.checkbox-special {
  @apply flex-col;
}

.checkbox-special-child {
  @apply min-h-[4rem] flex p-[auto];
}

/*
Navigation
*/
.nav {
  @apply shadow-2xl bg-transparent bg-opacity-70 !important;
}

.dummy {
  @apply bg-none;
}

.nav-selected-line .line {
  @apply bg-red-500 h-[75%];
}

.nav-selected-line {
  @apply transition-all;
  border-color: transparent !important;
  background-color: var(--fallback-bc, oklch(var(--bc)/0.2)) !important;
}

.search-input-search-icon:focus {
  @apply rounded-br-md rounded-tr-md !important;
}

#settings:hover svg {
  animation: circleAnimation 0.75s linear !important;
}

@keyframes circleAnimation {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(40deg);
  }
  to {
    transform: rotate(320deg);
  }
}

/*
*/
.menu {
  @apply items-center flex 
  w-[99%] h-[98vh] 
  bg-inherit
  rounded-lg flex-col mx-auto my-auto mt-auto;
  transition: background 500ms linear;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

/*
App pallete
*/
.apps {
  @apply bg-inherit;
}

.slider {
  -webkit-appearance: none; /* Override default CSS styles */
  appearance: none;
  padding: auto;
  width: 40px; /* Full-width */
  height: 20px; /* Specified height */
  @apply bg-gray-400 my-auto rounded-lg;
  outline: none; /* Remove outline */
  opacity: var(
    --opacity
  ); /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 14px; /* Set a specific slider handle width */
  height: 14px; /* Slider handle height */
  background: darkgreen; /* Green background */
  border-radius: 50%;
  cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04aa6d; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider-disabled::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 14px; /* Set a specific slider handle width */
  height: 14px; /* Slider handle height */
  background: darkred; /* Green background */
  border-radius: 50%;
  cursor: pointer; /* Cursor on hover */
}

.slider-disabled::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: rgb(170, 4, 4); /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/*
User Panel
*/
.user {
  @apply mt-4 bg-inherit text-base-content w-[98%] p-[auto] h-[43rem] flex flex-col;
  transition: all 500ms linear;
}

.img {
  @apply mt-2 mx-auto;
  position: relative;
  width: 50%;
  border-radius: 50%;
}

.user .div {
  @apply bg-gray-200;
}

.img .div {
  @apply bg-gray-500 text-sky-800 mx-auto mt-2 flex items-center justify-center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 500px;
  width: 500px;
  opacity: 0;
  transition: 0.5s ease;
  cursor: pointer;
  border-radius: 50%;
}

.img .div-l {
  @apply bg-gray-300 !important;
}

.img-dev .div-l {
  @apply bg-gray-100 shadow-xl !important;
}

.user img {
  transition: all 250ms linear;
  @apply mx-auto mt-2;
  display: block;
  width: 500px;
  min-width: 500px;
  max-width: 500px;
  border-radius: 50%;
  height: 500px;
  min-height: 500px;
  max-height: 500px;
}

.name h1 {
  font-size: 60px;
}

.name h6 {
  margin-top: 1px;
  font-size: 25px;
}

.img:hover .div {
  opacity: 0.7;
}

.text {
  color: white;
  font-size: 35px;
  position: absolute;
  text-align: center;
}

.text-l {
  @apply text-slate-400;
}

.img-dev {
  @apply mt-2 mx-auto rounded-md;
  width: 256px;
  height: 256px;
  position: relative;
}

.img-dev img {
  @apply rounded-lg;
}

/* Navigation Bar
*/
.nav-h {
  @apply absolute bg-base-200 bg-opacity-100 z-[10] !important;
}

.nav-h .n-item-h {
  transition: none 0s linear !important;
}

.n-item-h {
  margin-top: 0px;
  margin-left: 8px;
  margin-right: 8px;
}

.n-item-h:hover {
  margin-top: 0px !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
  @apply bg-base-100 !important;
}
