@import '@shoelace-style/shoelace/dist/themes/light.css';
@import 'photoswipe/dist/photoswipe.css';

body {
  /* App theming */
  --sp-default-font-family: 'EkMukta-Light';
  --sp-font-size-smaller: 11px;
  --sp-font-size-default: 14px;
  --sp-font-size-larger: 1rem;
  --sp-font-size-headline: 21px;

  --sp-default-padding: 1rem;
  --sp-default-gap: 0.31rem;
  --sp-default-padding-mobile: 0.5rem;
  --sp-default-icon-size: 3.75rem;
  --sp-default-border-radius: 0.18rem;
  --sp-default-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.05);

  --sp-color-a: 0, 100, 145;
  --sp-color-b: 0, 100, 145;
  --sp-color-c: 41, 50, 55;
  --sp-color-d: 41, 50, 55;
  --sp-color-error: rgba(220, 38, 38, 1);
  --sp-color-red: 197, 74, 85;
  --sp-color-orange: 251, 197, 69;
  --sp-color-green: 128, 191, 64;

  --sp-dark-text-color: 41, 50, 55;
  --sp-light-text-color: 255, 255, 255;
  --sp-greydark: 51, 52, 50;
  --sp-greymedium: 128, 128, 128;
  --sp-greylight: 236, 236, 236;
  --sp-greyverylight: 249, 249, 249;
  --sp-greyborder: 218, 218, 218;

  /* Component theming */
  --sp-spot-transfer-indicator-track-width: 0.4rem;
  --sp-spot-transfer-indicator-size: 85px;

  --sp-checkbox-active-color: rgb(var(--sp-color-c));
  --sp-checkbox-inactive-color: rgb(var(--sp-color-c));
  --sp-checkbox-disabled-color: rgb(var(--sp-color-d));

  --sp-button-background-color: rgb(var(--sp-color-b));
  --sp-button-active-color: rgb(var(--sp-color-d));
  --sp-button-disabled-color: rgba(var(--sp-color-a), 0.4);

  --sp-audio-input-wave-color: rgb(var(--sp-greymedium));
  --sp-audio-input-wave-progress-color: rgb(var(--sp-color-a));
  --sp-audio-input-cursor-color: rgb(var(--sp-color-a));
  --sp-audio-input-view-mode-button-size: 45px;
  --sp-audio-input-view-mode-waveform-height: 38px;

  --sp-drop-zone-border-width: 5px;
  --sp-drop-zone-background-color: rgba(var(--sp-color-c), 0.8);
  --sp-drop-zone-background-color-active: rgba(var(--sp-color-b), 0.8);
  --sp-drop-zone-border-color: rgba(var(--sp-color-a));
  --sp-drop-zone-border-color-active: rgba(var(--sp-color-a));

  --sp-image-input-button-width: 90px;

  /* Overwrite shoelace styles */
  --sl-color-danger-600: var(--sp-color-error);
}