:root {
  /** Success Colors (Green) */
  --pico-success: #2F9E44;
  /* 550 */
  --pico-success-hover: #2B8840;
  /* 600 */
  --pico-success-focus: rgb(43, 136, 64, .5);
  /* 600 */

  /** Danger Colors (Red) */
  --pico-danger: #C52F21;
  /* 550 */
  --pico-danger-hover: #AF291D;
  /* 600 */
  --pico-danger-focus: rgb(175, 41, 29, .5);
  /* 600 */

  /** Warning Colors (Amber) */
  --pico-warning: #FFBF00;
  /* 200 */
  --pico-warning-text: #D8A100;
  /* 300 */
  --pico-warning-hover: #E8AE01;
  /* 250 */
  --pico-warning-focus: rgb(232, 174, 1, .5);
  /* 250 */

  /** Info Colors (Cyan) */
  --pico-info: #047878;
  /* 550 */
  --pico-info-focus: rgb(4, 106, 106, .5);
  /* 600 */
  --pico-info-hover: #046A6A;
  /* 600 */

  /** Animation Values */
  --modal-duration: .2s;
  --modal-shrink: .95;
  --modal-distance: 1rem;
}

/** Dark Variants */
@media only screen and (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]),
  :host(:not([data-theme="light"])) {
    --pico-danger-hover: #D93526;
    /* 500 */
    --pico-warning-text: #E8AE01;
    /* 250 */
    --pico-warning-hover: #FECC63;
    /* 150 */
    --pico-warning-focus: rgb(255, 191, 0, .5);
    /* 200 */
    --pico-info-hover: #058686;
    /* 500 */
  }
}

/** Danger Button */
:where(button, [role="button"]).danger {
  &:not(.outline) {
    --pico-background-color: var(--pico-danger);
    --pico-border-color: var(--pico-danger);
  }

  &.outline {
    --pico-background-color: transparent;
    --pico-border-color: var(--pico-danger);
    --pico-color: var(--pico-danger);
  }

  &:not(.outline):is(:hover, :active, :focus) {
    --pico-background-color: var(--pico-danger-hover) !important;
    --pico-border-color: var(--pico-danger-hover) !important;
  }

  &.outline:is(:hover, :active, :focus) {
    --pico-background-color: transparent;
    --pico-border-color: var(--pico-danger-hover) !important;
    --pico-color: var(--pico-danger-hover) !important;
  }

  &:focus {
    --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-danger-focus);
  }
}

/** Warning Button */
:where(button, [role="button"]).warning {
  &:not(.outline) {
    --pico-background-color: var(--pico-warning);
    --pico-border-color: var(--pico-warning);
    --pico-color: black;
  }

  &.outline {
    --pico-background-color: transparent;
    --pico-border-color: var(--pico-warning);
    --pico-color: var(--pico-warning-text);
  }

  &:not(.outline):is(:hover, :active, :focus) {
    --pico-background-color: var(--pico-warning-hover) !important;
    --pico-border-color: var(--pico-warning-hover) !important;
  }

  &.outline:is(:hover, :active, :focus) {
    --pico-background-color: transparent;
    --pico-border-color: var(--pico-warning-hover) !important;
    --pico-color: var(--pico-warning-hover) !important;
  }

  &:focus {
    --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-warning-focus);
  }
}

/** Info Button */
:where(button, [role="button"]).info {
  &:not(.outline) {
    --pico-background-color: var(--pico-info);
    --pico-border-color: var(--pico-info);
  }

  &.outline {
    --pico-background-color: transparent;
    --pico-border-color: var(--pico-info);
    --pico-color: var(--pico-info);
  }

  &:not(.outline):is(:hover, :active, :focus) {
    --pico-background-color: var(--pico-info-hover) !important;
    --pico-border-color: var(--pico-info-hover) !important;
  }

  &.outline:is(:hover, :active, :focus) {
    --pico-background-color: transparent;
    --pico-border-color: var(--pico-info-hover) !important;
    --pico-color: var(--pico-info-hover) !important;
  }

  &:focus {
    --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-info-focus);
  }
}

/** Utilities */
.success-text {
  color: var(--pico-success);
}

.danger-text {
  color: var(--pico-danger);
}

.warning-text {
  color: var(--pico-warning);
}

.info-text {
  color: var(--pico-info);
}

.bottom-spacing {
  margin-bottom: var(--pico-spacing);
}

.bottom-clear {
  margin-bottom: 0;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--pico-spacing);

  >* {
    margin: 0;
  }

  &.spread {
    justify-content: space-between;

    button[type="submit"] {
      width: auto;
    }
  }

  &:not(.spread)>* {
    flex: 1;
  }

  &.nogap {
    gap: 0;
  }

  &.column {
    flex-direction: column;
  }

  &.wrap {
    flex-wrap: wrap;
  }
}

/** Tables **/
.overflow-auto:has(>table.bordered) {
  border: 1px solid var(--pico-accordion-border-color);
  border-radius: var(--pico-border-radius);
  margin-bottom: var(--pico-spacing);

  >table {
    margin: 0;
  }
}

table :is([type="button"], [type="submit"], [type="reset"]) {
  margin-bottom: 0;
}

/** Alerts */
article.alert {
  &:empty {
    display: none;
  }

  &.danger {
    color: white;
    background: var(--pico-danger);
  }

  &.warning {
    color: black;
    background: var(--pico-warning);
  }

  &.info {
    color: white;
    background: var(--pico-info);
  }
}

/** Dialog Animations */
dialog {
  animation: fadeout var(--modal-duration) ease-out forwards;

  &[open] {
    animation: fadein var(--modal-duration) ease-in forwards;
  }

  >article {
    animation: slidedown var(--modal-duration) ease-out forwards;
  }

  &[open]>article {
    animation: slideup var(--modal-duration) ease-in forwards;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    display: none;
  }

  to {
    opacity: 1;
    display: flex;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
    display: flex;
  }

  to {
    opacity: 0;
    display: none;
  }
}

@keyframes slideup {
  from {
    margin-top: var(--modal-distance);
    transform: scale(var(--modal-shrink));
  }

  to {
    margin-top: 0;
    transform: scale(1);
  }
}

@keyframes slidedown {
  from {
    margin-top: 0;
    transform: scale(1);
  }

  to {
    margin-top: var(--modal-distance);
    transform: scale(var(--modal-shrink));
  }
}