/*
  AzuOS Default Theme (Purple)
	Written By: MTSyntho @ AzuSystem 2024
*/

:root {
	--azu-color-background: hsla(270, 35%, 7%);
  --azu-wallpaper: url('../assets/wallpapers/palm tree near dome.jpg');
  --azu-startbutton: url('../assets/logo_white.svg');
	--azu-color-main: hsla(270, 44%, 12%);
	--azu-color-light: hsla(270, 40%, 18%);
	--azu-color-shadow: hsla(0, 0%, 0%);
	--azu-button-color-main: hsla(270, 44%, 12%);
	--azu-text-color: hsla(0, 0%, 100%);

  --azu-button-bg: hsla(0, 0%, 100%, 5%);
  --azu-button-bg: hsla(0, 0%, 100%, 7%);
  --azu-button-text: hsla(0, 0%, 100%, 100%);

  --azu-window-blur: blur(16px) saturate(180%);
  --azu-window-background: rgba(30, 17, 44, 0.75);
  --azu-window-border-radius: 12px;
  --azu-window-border: 1px solid rgba(255, 255, 255, 0.125);
  --azu-window-shadow: 0px 0px 30px #000000;
  --azu-window-inner-background: hsla(267, 0%, 9%, 0.312);

  --azu-taskbar-background: hsla(270, 44%, 12%, 75%);
  --azu-taskbar-outline: 1px solid rgba(255, 255, 255, 0.125);
  --azu-taskbar-width: 80%;
  --azu-taskbar-shadow: 0 0 10px 2px #000000cc;
  --azu-taskbar-blur: blur(16px) saturate(200%);
  --azu-taskbar-border-radius: 12px;

  --azu-button-small-color: hsla(0, 0%, 100%, 5%);
  --azu-button-small-hover-color: hsla(0, 0%, 100%, 10%);
  --azu-button-small-clicked-color: hsla(0, 0%, 100%, 5%);
  --azu-button-small-border-radius: 10px;
  --azu-button-small-padding: 12px 16px;
  --azu-button-small-font-size: 12px;
  --azu-button-small-shadow: none;
  --azu-button-small-animation-duration: 0.1s;

  --azu-button-large-color: hsla(270, 0%, 12%);
  --azu-button-large-hover-color: hsla(270, 0%, 17%);
  --azu-button-large-clicked-color: hsla(270, 0%, 7%);
  --azu-button-large-border: 2px solid hsla(270, 0%, 17%);
  --azu-button-large-border-radius: 5px;
  --azu-button-large-padding: 10px 26px;
  --azu-button-large-font-size: 16px;
  --azu-button-large-shadow: 0px 0px 7px #000000;
  --azu-button-large-animation-duration: 0.2s;
}

/* @keyframes notification-in {
  from {
    right: -400px;
    opacity: 0;
    pointer-events: none;
  }
  to {
    right: 0px;
    opacity: 1;
    pointer-events: all;
  }
}

@keyframes notification-out {
  from {
    right: 0px;
    opacity: 1;
    pointer-events: all;
  }
  to {
    right: -400px;
    opacity: 0;
    pointer-events: none;
  }
}

.__azuos-notification-in {
  animation: notification-in 0.2s ease-out forwards;
}

.__azuos-notification-out {
  animation: notification-out 0.2s ease-in forwards;
} */