/* ==UserStyle==
@name           Gruvbox for Pocketbase
@namespace      git.m3.fyi/Marsn3
@version        1.0.2
@description    A dark Theme for Pocketbase
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/userstyles
@updateURL https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/pocketbase.user.css
@license MIT
==/UserStyle== */

@-moz-document domain("api.m3.fyi") {
  /*~~~~~ Base Colors ~~~~~*/
  :root {
    --txtPrimaryColor: var(--fg);
    --txtHintColor: var(--fg2);
    --txtDisabledColor: var(--fg3);
    --primaryColor: var(--green-dim);
    --bodyColor: var(--bg);
    --baseColor: var(--bg);
    --baseAlt1Color: var(--bg4);
    --baseAlt2Color: var(--bg3);
    --baseAlt3Color: var(--bg2);
    --baseAlt4Color: var(--bg1);
    --infoColor: var(--blue);
    --infoAltColor: var(--blue-dim);
    --successColor: var(--green);
    --successAltColor: var(--green-dim);
    --dangerColor: var(--red);
    --dangerAltColor: var(--red-dim);
    --warningColor: var(--orange);
    --warningAltColor: var(--orange-dim);
    --overlayColor: rgba(168, 153, 132, 0.25);
    --tooltipColor: var(--bg4);
    --shadowColor: rgba(50, 48, 47, 0.5);
    --accent-color: var(--primaryColor);
  }

  /*~~~~~ Buttoms ~~~~~*/
  .btn-sm .btn-warning {
    background-color: var(--warningColor) !important;
  }
  .btn.btn-secondary,
  .btn.btn-outline {
    color: var(--txtHintColor);
    background: var(--baseAlt4Color);
  }

  /*~~~~~ Labels ~~~~~*/
  .label.label-warning,
  .label.label-info,
  .label.label-success,
  .alert {
    color: var(--baseColor);
  }
  .alert.alert-warning .icon {
    color: var(--baseColor);
  }

  /*~~~~~ Syntax Highlighting for Code fields ~~~~~*/
  .prism-light,
  code {
    background: var(--baseAlt4Color) !important;
  }
  .prism-light .token.punctuation {
    color: var(--txtPrimaryColor);
  }
  .prism-light .token.property {
    color: var(--infoColor);
  }
  .prism-light .token.operator {
    color: var(--dangerColor);
  }
  .prism-light .token.keyword {
    color: var(--dangerColor);
  }
  .prism-light .token.string {
    color: var(--successColor);
  }
  .prism-light .token.boolean {
    color: var(--warningColor);
  }
  .prism-light .token.number {
    color: var(--orange);
  }
  .prism-light .token.class-name {
    color: var(--blue);
  }
  .prism-light .token.comment {
    color: var(--fg4);
  }
  .prism-light .token.function {
    color: var(--purple);
  }

  /*~~~~~ Colored Delete Icon ~~~~~*/
  .ri-delete-bin-7-line {
    color: var(--dangerColor);
  }

  /*~~~~~ Syntax Highlighting for Regex Fields ~~~~~*/
  .ͼb {
    color: var(--purple);
  }
  .ͼe {
    color: var(--dangerColor);
  }
}