/* ========================================
   LAYOUT & STRUCTURE
   ======================================== */
@import url("app.css");
@import url("grid.css");
@import url("modal.css");
@import url("dialog.css");

/* ========================================
   COMPONENTS
   ======================================== */
@import url("nav.css");
@import url("media.css");
@import url("gallery.css");
@import url("list.css");
@import url("wall.css");
@import url("user.css");

/* ========================================
   COMPONENT UTILITIES
   ======================================== */
@import url("components.css");

/* ========================================
   WIDGET STYLES
   ======================================== */
@import url("widget/core.css");
@import url("widget/animekarmalist.css");
@import url("widget/eksisozluk.css");
@import url("widget/lolesports.css");
@import url("widget/proxmox.css");
@import url("widget/seismicportal.css");

/* ========================================
   THEME & UTILITIES
   ======================================== */
@import url("override.css");
@import url("utils.css");

:root {
  --x-blur: 0.8rem;

  --x-gap-small: 0.5rem;
  --x-gap-medium: 1rem;
  --x-gap-large: 1.5rem;

  --x-br: 10px;
  --x-br-t: var(--x-br) var(--x-br) 0 0;
  --x-br-b: 0 0 var(--x-br) var(--x-br);
  --x-br-half: calc(var(--x-br) * 0.5);
  --x-br-t-half: var(--x-br-half) var(--x-br-half) 0 0;
  --x-br-b-half: 0 0 var(--x-br-half) var(--x-br-half);

  --x-c-warn: hsl(50, 100%, 64%);

  --x-c-foreground: hsl(from var(--color-background) h s calc(l + 5));
  --x-c-foreground-light: hsl(from var(--x-c-foreground) h s calc(l + 3));
  --x-c-foreground-lighter: hsl(
    from var(--x-c-foreground-light) h s calc(l + 5)
  );
  --x-c-foreground-shiny: hsl(
    from var(--x-c-foreground-lighter) h s calc(l + 8)
  );
  --x-c-foreground-alpha: hsl(from var(--x-c-foreground-lighter) h s l / 0.75);

  --x-c-border: hsl(from var(--x-c-foreground-light) h s calc(l + 3));

  --x-t-speed: 0.2s;

  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce: bounce 1s infinite;

  --glimpse-modal-height: 70vh;
  --glimpse-spacing: var(--widget-content-horizontal-padding);
  --glimpse-spacing-2x: calc(var(--glimpse-spacing) * 2);
  --glimpse-spacing-half: calc(var(--glimpse-spacing) / 2);
  --glimpse-bg-light: hsl(var(--bghs), calc(var(--bgl) + 3%));
  --glimpse-bg-lighter: hsl(var(--bghs), calc(var(--bgl) + 5%));
  --glimpse-color-yellow: hsl(60, 50%, 75%);

  --2x-c-foreground: oklch(from var(--color-background) calc(l + 0.05) c h);
  --2x-c-foreground-light: oklch(from var(--x-c-foreground) calc(l + 0.02) c h);
  --2x-c-foreground-lighter: oklch(
    from var(--x-c-foreground) calc(l + 0.08) c h
  );
  --2x-c-foreground-alpha: oklch(
    from var(--x-c-foreground-lighter) l c h / 0.75
  );
}

/**************************************************************************************************/

.x-thumb {
  filter: grayscale(0.2) contrast(0.9);
  opacity: 0.75;
  transition:
    filter 0.2s,
    opacity 0.2s;
  width: 100%;
  object-fit: cover;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
  border-radius: var(--x-br-half);
}

.x-thumb-parent:hover .x-thumb {
  filter: none;
  opacity: 1;
}

/**************************************************************************************************/

.x-play {
  background: linear-gradient(
    to top,
    hsl(from var(--x-c-foreground) h s l / 0.25) 25%,
    transparent
  );
  transition: background var(--x-t-speed);
}

.x-play svg {
  opacity: 0;
  transition: opacity var(--x-t-speed);
  height: 5rem;
  width: 5rem;
  color: white;
  filter: drop-shadow(0px 0px 20px var(--color-background));
}

.x-overlay > .x-play {
  border-radius: var(--x-br-t);
}

.x-overlay:hover > .x-play {
  background: hsl(from var(--x-c-foreground-light) h s l / 0.75);
}

.x-overlay:hover > .x-play svg {
  opacity: 1;
}