/* stylelint-disable custom-property-pattern */

/* main styles */
body {
  --mainColor: #014d8a;
  --mainColorLighter: #0159a0;
  --mainColorVeryLight: #0159a0;
  --mainColorLightest: #0159a0;
  --mainHoverColor: #013d6e;
  --mainBackgroundColor: #1e1e1e;
  --mainForegroundColor: #f7f7f7;
  --menuBackgroundColor: #151515;
  --mainBackgroundHoverColor: #333;
  --submenuBackgroundColor: #262626;
  --inputForegroundColor: #f7f7f7;
  --inputBackgroundColor: #2e2e2e;
  --inputPlaceholderColor: #f7f7f7;
  --inputBorderColor: #8d8d8d8d;
  --textareaForegroundColor: #f7f7f7;
  --textareaBackgroundColor: #2e2e2e;
  --menuForegroundColor: #f7f7f7;
  --markdownTextareaBackgroundColor: #2e2e2e;
  --greyForegroundColor: #8d8d8d;
  --greyBackgroundColor: #262626;
  --greySecondaryBackgroundColor: #363636;
  --actionButtonColor: #8d8d8d;
  --activatedActionButtonColor: #f7f7f7;
  --channelBackgroundColor: #262626;
  --supportButtonHeartColor: #e83e8c;

  /* Compat with PeerTube < 3.2 */
  --submenuColor: #262626;
}

/* logo fixes */
.icon-logo {
  min-width: 29px;
  min-height: 29px;
  background-color: #fff;
  background-origin: content-box;
  border-radius: 20px;
  padding: 3px 4px 3px 8px;
}

/* darker logged in block */
.logged-in-block {
  background-color: #00000052 !important;
}

/* shadowy cards */
.card {
  border-color: var(--submenuBackgroundColor);
  box-shadow:
    0 0 calc((var(--elevation) * 0.225px) + 2px)
    rgba(0, 0, 0, calc(0.11 * (2 - var(--background-luminance, 1)))),
    0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px))
    rgba(0, 0, 0, calc(0.13 * (2 - var(--background-luminance, 1))));
}

/* input field styles */
.p-dropdown,
.p-checkbox-box,
.progress {
  background: var(--inputBackgroundColor) !important;
  border: none !important;
}

.p-dropdown-panel,
.p-dropdown .p-dropdown-trigger {
  background: var(--submenuBackgroundColor) !important;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item,
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group,
.p-dropdown .p-dropdown-label {
  color: var(--greyForegroundColor) !important;
}

#p-highlighted-option,
.p-dropdown:hover .p-dropdown-label {
  color: var(--mainForegroundColor) !important;
}

.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight, .p-disabled):hover,
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight, .p-disabled):hover {
  color: var(--mainForegroundColor) !important;
  background: var(--mainHoverColor) !important;
}

.p-checkbox-box:hover {
  background: var(--mainBackgroundHoverColor) !important;
}

.p-checkbox-box.p-highlight:hover {
  background: var(--mainHoverColor) !important;
}

.progress span {
  color: var(--mainForegroundColor) !important;
}

input[type="submit"][disabled] {
  background: var(--submenuBackgroundColor) !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup {
  background: var(--submenuBackgroundColor) !important;
  color: var(--mainForegroundColor) !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked,
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
  background: var(--mainColorLightest) !important;
  color: var(--mainForegroundColor) !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked,
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
  background: var(--mainHoverColor) !important;
  color: var(--mainForegroundColor) !important;
}

.ng-select.ng-select-opened > .ng-select-container {
  background: var(--textareaBackgroundColor);
}

/* popover styles */
.popover {
  background: var(--submenuBackgroundColor) !important;
  color: var(--mainForegroundColor) !important;
}

.popover-body {
  color: var(--mainForegroundColor) !important;
}

.all-notifications,
.notifications-header {
  color: var(--mainForegroundColor) !important;
}

.popover-notifications.popover .popover-body .notifications-header a,
.popover-notifications.popover .popover-body .notifications-header button,
my-global-icon svg {
  color: var(--greyForegroundColor) !important;
}

/* fix publish button */
.publish-button my-global-icon svg,
.create-button my-global-icon svg,
.add-button my-global-icon svg,
.block-button my-global-icon svg,
.follow-button my-global-icon svg {
  color: #8dcbfe !important;
}

/* fix bad contrast alert color */
.alert-info {
  background-color: #bee5eb;
}

/* fix foreground colors */
::selection,
::-webkit-selection,
a.focus-visible {
  color: var(--mainForegroundColor) !important;
}

/* fix filter icon color */
.icon.icon-filter {
  filter: invert(58%) sepia(0%) saturate(20%) hue-rotate(139deg) brightness(96%) contrast(94%);
}

/* fix paginator */
.p-paginator-next:not(.p-disabled, .p-highlight):hover,
.p-paginator-last:not(.p-disabled, .p-highlight):hover,
.p-paginator-first:not(.p-disabled, .p-highlight):hover,
.p-paginator-prev:not(.p-disabled, .p-highlight):hover,
.p-paginator-page:not(.p-highlight):hover {
  background-color: var(--mainHoverColor) !important;
}

/* fix accordion */
.accordion {
  --bs-accordion-btn-color: var(--mainForegroundColor) !important;
}