$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$backdrop_transition: 200ms ease-out;
$focus_transition: outline-color 200ms $ease-out-quad,
                   outline-width 200ms $ease-out-quad,
                   outline-offset 200ms $ease-out-quad;
$button_transition: background 200ms $ease-out-quad,
                    box-shadow 200ms $ease-out-quad;
$button_radius: 9px;
$card_radius: 12px;
$menu_radius: 9px;
$menu_margin: 6px; //margin around menuitems & sidebar items
$menu_padding: 12px; //inner menuitem padding
$popover_radius: $menu_radius + 6;
$dialog_radius: $button_radius + 6;

:root {
  --window-radius: #{$button_radius + 6};

  -gtk-icon-palette: success var(--success-color),
                     warning var(--warning-color),
                     error   var(--error-color),
                     accent  var(--accent-color);
}

.background {
  color: var(--window-fg-color);
  background-color: var(--window-bg-color);
}

dnd {
  color: var(--window-fg-color);
}

.normal-icons {
  -gtk-icon-size: 16px;
}

.large-icons {
  -gtk-icon-size: 32px;
}

%osd,
.osd:not(progressbar):not(button):not(menubutton):not(splitbutton):not(inline-view-switcher) {
  --accent-bg-color: RGB(255 255 255 / 75%);
  --accent-fg-color: RGB(0 0 0 / 75%);
  --scrollbar-outline-color: RGB(0 0 0 / 50%);
  --standalone-color-oklab: #{$standalone-color-oklab-dark};

  --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
  --destructive-color: oklab(from var(--destructive-bg-color) var(--standalone-color-oklab));
  --success-color: oklab(from var(--success-bg-color) var(--standalone-color-oklab));
  --warning-color: oklab(from var(--warning-bg-color) var(--standalone-color-oklab));
  --error-color: oklab(from var(--error-bg-color) var(--standalone-color-oklab));

  color: $osd_fg_color;
  border: none;
  background-color: $osd_bg_color;
  background-clip: padding-box;
}

/* Text selection */

selection {
  background-color: color-mix(in srgb, var(--view-fg-color) 10%, transparent);
  color: transparent;

  &:focus-within {
    background-color: color-mix(in srgb, var(--accent-bg-color) 30%, transparent);
  }
}

:not(window):drop(active):focus,
:not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
  border-color: $drop_target_color;
  box-shadow: inset 0 0 0 1px $drop_target_color;
  caret-color: $drop_target_color;
}

placessidebar,
stackswitcher,
expander-widget {
  :not(window):drop(active):focus,
  :not(window):drop(active) {
    box-shadow: none;
  }
}

/* Outline for low res icons */
.lowres-icon {
    -gtk-icon-shadow: 0 -1px RGB(0 0 6 / 5%),
      1px 0 RGB(0 0 6 / 10%),
      0 1px RGB(0 0 6 / 30%),
      -1px 0 RGB(0 0 6 / 10%);
}

/* Drop shadow for large icons */
.icon-dropshadow {
  -gtk-icon-shadow: 0 1px 12px RGB(0 0 6 / 5%),
      0 -1px RGB(0 0 6 / 5%),
      1px 0 RGB(0 0 6 / 10%),
      0 1px RGB(0 0 6 / 30%),
      -1px 0 RGB(0 0 6 / 10%);
}

@keyframes needs_attention {
  from { background-image: radial-gradient(farthest-side, var(--accent-color) 0%, transparent 0%); }
  to { background-image: radial-gradient(farthest-side, var(--accent-color) 95%, transparent); }
}

%needs_attention {
  // the dot is drawn by using two radial gradient, the first one is the actual dot, the other
  // simulates the shadow labels and icons normally have in buttons.
  animation: needs_attention 150ms ease-in;

  background-image: radial-gradient(farthest-side, var(--accent-color) 96%, transparent);
  background-size: 6px 6px;
  background-repeat: no-repeat;

  background-position: right 3px;

  &:dir(rtl) {
    background-position: left 3px;
  }
}

@import 'widgets';
