/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

/** This file is used to override UI inside "common-shared.css" */

/** These types of buttons look INSAINELY bad in the preferences page */
xul|button {
  --size-item-large: 34px;

  padding: var(--zen-button-padding) !important;
  transition: 0.1s;
}

dialog::part(dialog-button) {
  --button-background-color: light-dark(rgba(28, 28, 28, 0.1), rgba(255, 255, 255, .1)) !important;
  --button-background-color-hover: color-mix(in srgb, var(--button-background-color) 90%, transparent);
  --button-background-color-active: color-mix(in srgb, var(--button-background-color) 80%, transparent);
  --button-background-color-primary: light-dark(#1c1c1c, #dddddd);
  --button-background-color-primary-hover: color-mix(in srgb, var(--button-background-color-primary) 95%, transparent);
  --button-background-color-primary-active: color-mix(in srgb, var(--button-background-color-primary) 90%, transparent);

  position: relative;
  border: none;
  border-radius: 10px;
}

@media (-moz-platform: macos) {
  dialog[defaultButton="accept"]::part(dialog-button) {
    &:is([dlgtype="accept"], [dlgtype="cancel"]) {
      padding-inline-end: 3.7em;

      &::after {
        border-radius: 4px;
        font-weight: 600;
        position: absolute;
        padding: 3px 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
      }

      &[dlgtype="accept"]::after {
        content: "⏎";
        right: 0.6em;
        font-size: 12px;
        width: 36px;
        color: light-dark(rgba(255, 255, 255, 0.80), rgba(0, 0, 0, 0.60));
      }

      &[dlgtype="cancel"]::after {
        content: "ESC";
        right: 1em;
        font-size: 8px;
        width: 30px;
        color: light-dark(rgba(28, 28, 28, 0.7), rgba(255, 255, 255, 0.6)) !important;
        outline: 1px solid light-dark(rgba(28, 28, 28, 0.1), rgba(255, 255, 255, 0.1)) !important;
      }
    }
  }
}

xul|button:not(#zen-workspaces-button):active {
  transform: scale(0.98);
}

.footer-button,
dialog::part(dialog-button) {
  font-weight: 500 !important;

  transition: scale 0.2s;
  &:active {
    scale: 0.98;
  }
}
