/* dark-mode
 * Come to the Dark Mode, we have wookies
 */

@import "./pm-buttons-mixins";

// forms/buttons
.pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder),
.pm-button--info {
  @include pm-button-dark;
}

// didn’t used extend, not possible in @media for design system website
$primary-border-blue-selectors: ".pm-button-blueborder";
@if ($pm-primary == $pm-blue) {
	$primary-border-blue-selectors: $primary-border-blue-selectors + ", .pm-button--primaryborder";
}
#{$primary-border-blue-selectors} {
  @include pm-button-blueborder-dark;
}

$primary-border-green-selectors: ".pv-button-greenborder";
@if ($pm-primary == $pv-green) {
	$primary-border-green-selectors: $primary-border-green-selectors + ", .pm-button--primaryborder";
}
#{$primary-border-green-selectors} {
  @include pv-button-greenborder-dark;
}


.pm-button--redborder,
.pm-button.pm-button--redborder {
	background-color: transparent;
	&:focus,
	&:hover,
	&:not(div):active,
	&:active {
		color: $pm-global-warning;
	}
}

.pm-button--link,
a, .link,
.pm-button.pm-button--link {
  &:focus,
  &:hover,
  &:not(div):active,
  &:active {
    color: currentColor;
  }
  &[disabled],
  &.is-disabled {
    color:  rgba( $white, .5 );
  }
}

.pm-group-button {
  &[disabled],
  &.is-disabled {
    &.pm-button {
      border-color: var(--bordercolor-input, $pm-global-border);
    }
    &.pm-button-blueborder {
      border-color: $pm-primary-light;
    }
    &.pv-button-greenborder {
      border-color: $pv-green-light;
    }
  }
}


.pm-field {
  &[type="search"] {
    background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-white");
  }
}
@if $rtl-option == true {
  [dir="rtl"] {
    [type="search"].pm-field {
      background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-rtl-white");
    }
  }
}

.pm-field[disabled] {
  color:  rgba( $white, .5);
  opacity: .6;
}


select.pm-field {
  background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-white");
}
.pm-checkbox {
  &:indeterminate + .pm-checkbox-fakecheck {
    background-image: url("#{$path-images}sprite-for-css-only.svg#css-dash-white");
  }
}
.pm-toggle-checkbox {
  &[aria-busy="true"] + .pm-toggle-label  {
    &::before {
      background-image: url(#{$path-images}loading-atom-smaller-dark.svg);
    }
  }
  &[disabled] + .pm-toggle-label  {
    background-color: transparent;
    opacity: .6;
  }
}

.searchbox-field[type="search"] {
  background-image: none;
}

.pm-toggle-label {
  & > .pm-toggle-label-text:first-child .pm-toggle-label-img {
     fill: $white;
  }
}

// loading
[aria-busy="true"] {
  background-image: url(#{$path-images}loading-atom-smaller-dark.svg);
}

button[aria-busy="true"] {
  background-image: url(#{$path-images}loading-atom-smaller-disabled-dark.svg);
}



tr[aria-busy="true"] td,
td[aria-busy="true"] {
  &::before {
    background-image: url(#{$path-images}loading-atom-smaller-dark.svg);
  }
}

.progressive[aria-busy="true"] {
  &::before {
    animation-name: backgroundLoading-dark;
  }
}

@keyframes backgroundLoading-dark {
  0% {
    background-color: $pm-secondary-grey;
  }
  100% {
    background-color: lighten($pm-secondary-grey, 10%);
  }
}


// others
details {
  &[open] > summary {
    background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-close-white);
  }
}
summary {
  background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-white);
}


.appConfigBody-darkmode, // for Angular
.isDarkMode {
  .display-on-darkmode {
    display: flex;
  }
  .hide-on-darkmode {
    display: none;
  }
}



// quick and dirty
.fill-global-grey:not(.fill-pm-blue):not(.fill-primary),
.fill-black:not(.fill-pm-blue):not(.fill-primary) { fill: $white; } // dirty, I know

.fill-currentColor { fill: currentColor; } // to avoid some issues


.qr-code {
	border: 1px solid $white;
}

.pill-icon-attachment {
	background-color: rgba(black, .45);

}


// global
:root {
  --bgcolor-item-column-list: #{$pm-global-grey};
  --bgcolor-unread-item-column-list: #{$pm-global-altgrey};
  --bgcolor-view-column-detail: #{$pm-secondary-grey};
  --bgcolor-main-area: #{$pm-secondary-grey};
  --bgcolor-context-bar: #{$pm-secondary-grey};
  --bgcolor-subheader: #{$bluish-grey};
  --bgcolor-toolbar: #{$pm-global-altgrey};
  --color-main-area: #{$white};
  --bgcolor-disabled-checkboxes-radios: #{$pm-global-altgrey};
  --bgcolor-item-column-active: #{$pm-blue-dark};
  --bordercolor-input: #{$pm-tertiary-grey};
  --bgcolor-muted: #{$pm-tertiary-grey};
  --bgcolor-input: #{$pm-global-altgrey};
  --bgcolor-highlight: #{$pm-global-altgrey};
  --color-input: #{$white};
  --dropdown-box-shadow: #{rgba(black, .75)};
  --bgcolor-meterbar: #{rgba(black, .375)};
}