@use './size';

:root {
  --mobile-size: size.$mobile-breakpoint;
  --dashboard-mobile-size: size.$dashboard-mobile-breakpoint;
  --sidebar-width-expaned: 270px;
  --sidebar-width-collapsed: 42px;
  --max-view-width: size.$dashboard-mobile-breakpoint;
  --max-table-cell-width: 240px;
  --max-dialog-card-height: 300px;
  --media-size-mobile: 600px;
  --app-header-height: 56px;
  --scrollbar-width: 8px;
  --scrollbar-border-radius: 4px;

  --gap-small: 0.3rem;
  --gap-default: 0.5rem;
  --gap-large: 1rem;
  --gap-larger: 1.5rem;

  --padding-micro: 0.2rem;
  --padding-mini: 0.5rem;
  --padding-small: 0.75rem;
  --padding-default: 1rem;
  --padding-large: 1.5rem;
  --padding-larger: 2rem;

  --margin-micro: 0.2rem;
  --margin-mini: 0.5rem;
  --margin-small: 0.75rem;
  --margin-default: 1rem;

  --epg-row-height: 4rem;
  --epg-header-height: 2rem;
  --epg-channels-width: 200px;

}

@media (max-width: size.$mobile-breakpoint) {
  :root {
    --gap-small: 0.2rem;
    --gap-default: 0.3rem;
    --gap-large: 0.5rem;
    --gap-larger: 0.75rem;

    --padding-micro: 0.2rem;
    --padding-mini: 0.3rem;
    --padding-small: 0.5rem;
    --padding-default: 0.75rem;
    --padding-large: 1rem;
    --padding-larger: 1.25rem;

    --margin-micro: 0.2rem;
    --margin-mini: 0.3rem;
    --margin-small: 0.5rem;
    --margin-default: 0.75rem;

    --epg-row-height: 3rem;
    --epg-header-height: 1.5rem;
    --epg-channels-width: 160px;
  }
}

:root {
  --primary-color: #124a9b;
  --secondary-color: #f67070;

  --action-item-background-color: #242427;
  --action-item-color: #ffffff;

  --text-color: #ffffff;
  --modest-text-color: #A1A1AAFF;
  --background-color: #09090B;
  --input-background-color: var(--action-item-background-color);
  --input-border-color: #454548;
  --input-focus-border-color: #12499a;
  --input-autofill-background-color: #323a48;
  --button-background-color: var(--primary-color);
  --border-color: #222224;
  --menu-text-color: #e2e2e5;
  --menu-icon-color: #707079;
  --menu-item-hover-background-color: var(--action-item-background-color);
  --menu-item-hover-color: var(--action-item-color);
  --menu-text-active-color: var(--primary-color);
  --menu-item-active-background-color: var(--menu-item-hover-background-color);
  --icon-button-hover-color: #8f8f97;
  --card-background-color: #18181b;
  --card-color: var(--modest-text-color);
  --sub-card-background-color: #27272a;

  --text-button-background-color: var(--action-item-background-color);
  --text-button-color: #ffffff;
  --text-button-border-color: #2F2F31;
  --text-button-hover-color: #ffffff;
  --text-button-hover-background-color: #303032;
  --text-button-primary-background-color: var(--primary-color);
  --text-button-primary-color: #ffffff;
  --text-button-primary-hover-background-color: #2f68be;
  --text-button-primary-hover-color: #ffffff;
  --text-button-secondary-background-color: #e53d3d;
  --text-button-secondary-color: #ffffff;
  --text-button-secondary-hover-background-color: #b02a2a;
  --text-button-secondary-hover-color: #ffffff;

  --text-button-active-background-color: #36c55a;
  --text-button-active-color: #fdfdfd;
  --text-button-active-hover-background-color: #2c9646;
  --text-button-active-hover-color: #fdfdfd;

  --toggle-switch-on-background-color: #36c55a;
  --toggle-switch-off-background-color: #3f3f45;
  --toggle-switch-toggle-color: #fdfdfd;

  --table-header-background-color: #242427;
  --table-card-background-color: #242427;
  --table-alternate-background-color: #1b1b1e;

  --discord-color: #5764f0;
  --documentation-color: #2b944b;
  --github-color: #ffffff;

  --app-header-background-color: #18181b;
  --app-header-color: #73d6fe;

  --pulse-color-1: #837f80;
  --pulse-color-2: #545454;

  --tag-padding:  0.3rem 0.5rem;
  --tag-border-radius: 0.5rem;
  --tag-border-color: #3a3a3a;
  --tag-color:  #e0e0e0;
  --tag-background-color:  #2c2f36;

  --tag-active-color: #49dc7f;
  --tag-active-background-color: #1e2d25;
  --tag-active-border-color: #2b6140;

  --tag-inactive-color:  #6f6f6f;
  --tag-inactive-background-color:  #3a3a3a;
  --tag-inactive-border-color: #555;

  --tag-alt-active-color: #d070e7;
  --tag-alt-active-background-color: #311a38;
  --tag-alt-active-border-color: #5d2f69;

  --tag-status-expired-color: #efda8f;
  --tag-status-expired-background-color: #393320;
  --tag-status-expired-border-color: #b69e5c;

  --tag-status-banned-color: #dd7573;
  --tag-status-banned-background-color: #4c3434;
  --tag-status-banned-border-color: #755252;

  --tag-status-trial-color: #49dcdc;
  --tag-status-trial-background-color: #1e252d;
  --tag-status-trial-border-color: #2b4c61;

  --tag-status-pending-color: #49dcdc;
  --tag-status-pending-background-color: #1e252d;
  --tag-status-pending-border-color: #2b4c61;

  --popup-background-color: #313133; //#18181b;
  --popup-shadow: 0 3px 8px #06070a;
  --popup-border-color: #2f2f31;
  --popup-color: #fff;
  //--popup-hover-background-color: #5599f0;
  //--popup-hover-color: #fff;

  --attention-color: #f67070;
  --warn-color: #b88e22;
  --active-color: #34d399;

  --output-xtream-color: #06b6d4;
  --output-m3u-color: #10b981;
  --output-hdhomerun-color: #6366f1;
  --output-strm-color: #f43f5e;

  --tag-live-background-color: #075b41;
  --tag-live-border-color: #10b981;
  --tag-video-background-color: #035b6e;
  --tag-video-border-color: #06b6d4;
  --tag-series-background-color: #3c3f9f;
  --tag-series-border-color: #6366f1;

  --toastr-success-color: #ffffff;
  --toastr-success-background-color: #53a453;
  --toastr-error-color:  #ffffff;
  --toastr-error-background-color: #bc362f;
  --toastr-info-color: #ffffff;
  --toastr-info-background-color: #2f95b3;
  --toastr-warning-color: #ffffff;
  --toastr-warning-background-color: #f69306;

  --hint-color: #888888;
  --label-color: #73d6fe;

  --sidebar-toggle-color: #ffffff;
  --sidebar-toggle-hover-color: #47495d;
  --playlist-color: #aeb0b2;
  --hover-border-color: #aaaab0;
  --spinner-color: #ffffff66;
  --spinner-highlight-color: #5599f0;


  --tree-count-color: #7b7b7e;
  --tree-hover-background-color: #004db4;
  --tree-hover-color: white;
  --tree-expander-hover-color: white;
  --tool-button-background-color: #434343;
  --tool-button-color: #fff;
  --tool-button-hover-color: #ffffff;
  --tool-button-hover-background-color: #0c8a13;

  --toolbar-background-color: #282A36;
  --toolbar-button-hover-color: #ffffff;
  --toolbar-button-hover-background-color: #004db4;

  --ok-color: #21e821;

  --card-background-color-darker: #1c2026;
  --card-border-color: #47495d;

  --title-label-color: #6495b1;

  --border-radius: 8px;

  --icon-button-border-radius: 4px;
  --icon-button-background-color: var(--button-background-color);
  --icon-button-color: #ffffff;
  --icon-button-hover-background-color: #0d6efd;

  --icon-button-hover-border-color: #ced9fb;

  --menu-button-color: #ffffff;
  --menu-button-background-color: #20273344;

  --menu-button-hover-color: #ffffff;
  --menu-button-hover-background-color: #202733;

  --menu-button-warn-hover-color: #dd7573;
  --menu-button-warn-hover-background-color: #4c3434;

  --scrollbar-track-color: #838383;
  --scrollbar-handle-color: #505050;

  --tabset-background-color: #44475a47; // #282A36;
  --tabset-border-color: #535353;
  --tab-background-color: #44475A;
  --tab-hover-background-color: #2bb249;
  --tab-hover-color: #fdfdfd;
  --tab-active-background-color: #1a672c;
  --tab-active-color: #fdfdfd;
  --tab-active-border-color: #35934d;

  --table-border-color: #44475a;

  --checkbox-background-color: #44475A;
  --checkbox-hover-background-color: #006fee;
  --checkbox-checked-background-color: #006fee;
  --checkbox-border-radius: 4px;

  --option-active-background-color: #50FA7B;
  --option-active-color: #000;

  --shocase-card-background: #4b4b4b;

  --breadcrumbs-background-color: #202733;
  --breadcrumb-background-color: #4e545d;
  --breadcrumb-color: #c4c4c4;
  --breadcrumb-active-background-color: #4ad96e;
  --breadcrumb-active-color: #000;

  --menu-icon-color-update: #A3D8FF;
  --menu-icon-color-user: #0ABAB5;
  --menu-icon-color-api_server: #FF9D23;
  --menu-icon-color-main_config: #FF2DF1;
  --menu-icon-color-status: #F9E400;

  --code-identifier-color: #569cd6;
  --code-var-access-color: #9cdcfe;
  --code-field-color: #bb8953;
  --code-property-color: #9a652f;
  --code-literal-color: #65a181;
  --code-num-literal-color: #6796ba;
  --code-built-in-function-color: #fac46c;
  --code-reserved-color: #e98863;
  --code-regex-color: #bb8953;
  --code-enum-color: #65a181;
  --code-range-color: #6796ba;
  --code-op-color: #569cd6;
  --code-comparison-background-color: #202429;
  --code-comparison-color: #ffffff;
  --code-bracket-1-color: #569CD6;
  --code-bracket-2-color: #C586C0;
  --code-bracket-3-color: #B5CEA8;
  --code-editor-background-color: #1e1e1e;
  --code-editor-color: #d4d4d4;
  --code-any-match-color: #fa5f2d;
  --code-null-literal-color: #fa5f2d;

  --toolbar-bg-color: #161b25;

  --epg-program-background-color: #1a222b; // #57317a; //#31597a;
  --epg-program-color: #ffffff;
  --epg-program-active-background-color: #263140;
  --epg-program-active-color: #ffffff;
  --epg-program-time-color: #707f99;
  --epg-program-active-time-color: #778295;
}

body[data-theme="bright"] {
  --primary-color: #2563eb;
  --secondary-color: #f43f5e;

  --action-item-background-color: #f3f4f6;
  --action-item-color: #111827;

  --text-color: #111827;
  --modest-text-color: #6b7280;
  --background-color: #f9fafb;

  --input-background-color: var(--action-item-background-color);
  --input-border-color: #d1d5db;
  --input-focus-border-color: var(--primary-color);
  --input-autofill-background-color: #f8fafc;

  --button-background-color: var(--primary-color);

  --border-color: #e5e7eb;
  --menu-text-color: #374151;
  --menu-icon-color: #9ca3af;
  --menu-item-hover-background-color: #eef2ff;
  --menu-item-hover-color: #111827;
  --menu-text-active-color: var(--primary-color);
  --menu-item-active-background-color: #e0e7ff;

  --icon-button-hover-color: #374151;

  --card-background-color: #ffffff;
  --card-color: #374151;
  --sub-card-background-color: #f8fafc;

  --text-button-background-color: var(--action-item-background-color);
  --text-button-color: #111827;
  --text-button-border-color: #e5e7eb;
  --text-button-hover-color: #111827;
  --text-button-hover-background-color: #e5e7eb;

  --text-button-primary-background-color: var(--primary-color);
  --text-button-primary-color: #ffffff;
  --text-button-primary-hover-background-color: #3b82f6;
  --text-button-primary-hover-color: #ffffff;

  --text-button-secondary-background-color: #ef4444;
  --text-button-secondary-color: #ffffff;
  --text-button-secondary-hover-background-color: #f43f5e;
  --text-button-secondary-hover-color: #ffffff;

  --text-button-active-background-color: #ecfdf5;
  --text-button-active-color: #16a34a;
  --text-button-active-hover-background-color: #ecfdf5;
  --text-button-active-hover-color: #16a34a;

  --toggle-switch-on-background-color: #22c55e;
  --toggle-switch-off-background-color: #d1d5db;
  --toggle-switch-toggle-color: #ffffff;

  --table-header-background-color: #f3f4f6;
  --table-card-background-color: #ffffff;
  --table-alternate-background-color: #f8fafc;

  --discord-color: #5865f2;
  --documentation-color: #22c55e;
  --github-color: #000000;

  --app-header-background-color: #ffffff;
  --app-header-color: var(--primary-color);

  --pulse-color-1: #eef2ff;
  --pulse-color-2: #e5e7eb;

  --tag-padding: 0.3rem 0.5rem;
  --tag-border-radius: 0.5rem;
  --tag-border-color: #e5e7eb;
  --tag-color: #374151;
  --tag-background-color: #f3f4f6;

  --tag-active-color: #16a34a;
  --tag-active-background-color: #ecfdf5;
  --tag-active-border-color: #86efac;

  --tag-inactive-color: #9ca3af;
  --tag-inactive-background-color: #f8fafc;
  --tag-inactive-border-color: #e5e7eb;

  --tag-alt-active-color: #7c3aed;
  --tag-alt-active-background-color: #f3e8ff;
  --tag-alt-active-border-color: #d6bbfb;

  --tag-status-expired-color: #b88e22;
  --tag-status-expired-background-color: #fffbeb;
  --tag-status-expired-border-color: #f5d0a9;

  --tag-status-banned-color: #ef4444;
  --tag-status-banned-background-color: #fff1f2;
  --tag-status-banned-border-color: #fecaca;

  --tag-status-trial-color: #06b6d4;
  --tag-status-trial-background-color: #ecfeff;
  --tag-status-trial-border-color: #cffafe;

  --tag-status-pending-color: #06b6d4;
  --tag-status-pending-background-color: #ecfeff;
  --tag-status-pending-border-color: #cffafe;

  --popup-background-color: #ffffff;
  --popup-shadow: 0 3px 8px rgba(14, 20, 30, 0.06);
  --popup-border-color: #e5e7eb;
  --popup-color: #0f172a;

  --attention-color: #ef4444;
  --warn-color: #f59e0b;
  --active-color: #16a34a;

  --output-xtream-color: #06b6d4;
  --output-m3u-color: #10b981;
  --output-hdhomerun-color: #6366f1;
  --output-strm-color: #ef4444;

  --tag-live-background-color: #dcfce7;
  --tag-live-border-color: #10b981;
  --tag-video-background-color: #ecfeff;
  --tag-video-border-color: #06b6d4;
  --tag-series-background-color: #eef2ff;
  --tag-series-border-color: #6366f1;

  --toastr-success-color: #ffffff;
  --toastr-success-background-color: #16a34a;
  --toastr-error-color: #ffffff;
  --toastr-error-background-color: #ef4444;
  --toastr-info-color: #ffffff;
  --toastr-info-background-color: #3b82f6;
  --toastr-warning-color: #ffffff;
  --toastr-warning-background-color: #f59e0b;

  --hint-color: #6b7280;
  --label-color: var(--primary-color);

  --sidebar-toggle-color: #111827;
  --sidebar-toggle-hover-color: #3b82f6;
  --playlist-color: #6b7280;
  --hover-border-color: #cbd5e1;
  --spinner-color: rgba(55, 65, 81, 0.4);
  --spinner-highlight-color: #3b82f6;

  --tree-count-color: #9ca3af;
  --tree-hover-background-color: #e0f2fe;
  --tree-hover-color: #0369a1;
  --tree-expander-hover-color: #0369a1;

  --tool-button-background-color: #f3f4f6;
  --tool-button-color: #111827;
  --tool-button-hover-color: #111827;
  --tool-button-hover-background-color: #dbeafe;

  --toolbar-background-color: #f3f4f6;
  --toolbar-button-hover-color: #111827;
  --toolbar-button-hover-background-color: #e0e7ff;

  --ok-color: #16a34a;

  --card-background-color-darker: #f3f6f9;
  --card-border-color: #e5e7eb;

  --title-label-color: #2563eb;

  --border-radius: 8px;

  --icon-button-border-radius: 4px;
  --icon-button-background-color: var(--button-background-color);
  --icon-button-color: #ffffff;
  --icon-button-hover-background-color: #1d4ed8;
  --icon-button-hover-border-color: #93c5fd;

  --menu-button-color: #111827;
  --menu-button-background-color: #ffffff;
  --menu-button-hover-color: #111827;
  --menu-button-hover-background-color: #e6f0ff;

  --menu-button-warn-hover-color: #ef4444;
  --menu-button-warn-hover-background-color: #fff1f2;

  --scrollbar-track-color: #f3f4f6;
  --scrollbar-handle-color: #cbd5e1;

  --tabset-background-color: #f3f4f6;
  --tabset-border-color: #e5e7eb;
  --tab-background-color: #44475A;
  --tab-hover-background-color: #2bb249;
  --tab-hover-color: #fdfdfd;
  --tab-active-background-color: #22c55e;
  --tab-active-color: #fdfdfd;
  --tab-active-border-color: #35934d;

  --table-border-color: #e5e7eb;

  --checkbox-background-color: #ffffff;
  --checkbox-hover-background-color: var(--primary-color);
  --checkbox-checked-background-color: var(--primary-color);
  --checkbox-border-radius: 4px;

  --option-active-background-color: var(--primary-color);
  --option-active-color: #ffffff;

  --shocase-card-background: #f3f4f6;

  --breadcrumbs-background-color: #f3f4f6;
  --breadcrumb-background-color: #e5e7eb;
  --breadcrumb-color: #374151;
  --breadcrumb-active-background-color: #dbeafe;
  --breadcrumb-active-color: #1e3a8a;

  --menu-icon-color-update: #93c5fd;
  --menu-icon-color-user: #06b6d4;
  --menu-icon-color-api_server: #ffb020;
  --menu-icon-color-main_config: #e879f9;
  --menu-icon-color-status: #f59e0b;

  --code-identifier-color: #2563eb;
  --code-var-access-color: #3b82f6;
  --code-field-color: #b0753f;
  --code-property-color: #9a652f;
  --code-literal-color: #16a34a;
  --code-num-literal-color: #2563eb;
  --code-built-in-function-color: #d97706;
  --code-reserved-color: #ef4444;
  --code-regex-color: #b0753f;
  --code-enum-color: #16a34a;
  --code-range-color: #2563eb;
  --code-op-color: #2563eb;
  --code-comparison-background-color: #f8fafc;
  --code-comparison-color: #0f172a;
  --code-bracket-1-color: #2563eb;
  --code-bracket-2-color: #7c3aed;
  --code-bracket-3-color: #10b981;
  --code-editor-background-color: #f8fafc;
  --code-editor-color: #0f172a;
  --code-any-match-color: #ef4444;
  --code-null-literal-color: #ef4444;

  --toolbar-bg-color: #ffffff;

  --epg-program-background-color: #e5e7eb;
  --epg-program-color: #111827;
  --epg-program-active-background-color: #3b82f6;
  --epg-program-active-color: #ffffff;
  --epg-program-time-color: #6b7280;
  --epg-program-active-time-color: #ffffff;
}