/* --------- Login --------- */

.login input::placeholder {
  @apply text-white;
}

/* --------- spotlight --------- */

.spotlight {
  @apply fixed z-20 h-max top-1/4 -mt-16 w-165 -ml-82.5 left-1/2 rounded-lg backdrop-blur-2xl shadow-2xl shadow-black/40 bg-c-100/80 border border-menu;
}

.spotlight input::placeholder {
  @apply text-c-black/40;
}

.spotlight .spotlight-type {
  @apply relative hstack pl-2.5 py-2 text-xs leading-none text-c-500 font-medium;
}

@media (max-width: 639px) {
  .spotlight {
    @apply w-full ml-0 left-0;
  }
}

/* --------- app window --------- */

.window-bound {
  width: 300%;
  height: 200%;
  left: -100%;
}

.innner-window {
  height: calc(100% - 1.5rem);
}

.safari-content {
  height: calc(100% - 2rem);
}

.traffic-lights .icon {
  @apply hidden;
}

.traffic-lights:hover .icon {
  @apply block;
}

/* --------- dock --------- */

.dock ul {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
}

.dock li .tooltip {
  @apply hidden;
  top: calc(-100% - 10px);
}

.dock li:hover .tooltip {
  @apply block;
  box-shadow: hsla(0deg, 0%, 0%, 20%) 0px 1px 5px 2px, 0 0 0 0 white;
}

/* --------- slider --------- */

.slider .rangeslider {
  @apply bg-c-300 w-full h-7 shadow-none m-0 rounded-r-full border-t border-r border-b border-transparent;
}

.slider .rangeslider .rangeslider__fill {
  @apply bg-c-100 shadow-none rounded-none;
}

.slider .rangeslider .rangeslider__handle {
  @apply border border-c-300 outline-none size-7 text-white bg-white;
  box-shadow: -3px 0px 8px 0px rgba(17, 17, 17, 0.15);
}

.slider .rangeslider .rangeslider__handle::after {
  @apply hidden;
}


/*
  Credits: W3 Schools: https://www.w3schools.com/howto/howto_css_switch.asp
*/

/* The switch - the box around the slider */
.switch-toggle {
  @apply relative inline-block h-5.5 w-9.5;
}

/* Hide default HTML checkbox */
.switch-toggle input {
  @apply size-0 opacity-0;
}

/* The slider */
.switch-toggle .slider-toggle {
  @apply absolute rounded-full bg-gray-400/50 inset-0 cursor-pointer duration-300;
}

.switch-toggle .slider-toggle:before {
  @apply content-[""] absolute rounded-full bg-white bottom-0.5 left-0.5 size-4.5 duration-300;
}

.switch-toggle input:checked + .slider-toggle {
  @apply bg-blue-500;
}

.switch-toggle input:checked + .slider-toggle:before {
  @apply translate-x-4;
}

.switch-toggle input:focus + .slider-toggle {
  box-shadow: 0 0 1px #3b82f6;
}
