// Applies theme styles across as many areas of the layout as possible.

// Scrollbar (PM currently does not style this element)
body {
  scrollbar-color: lighten($base, 10%) lighten($base, 2%);
}
::-webkit-scrollbar {
  width: 16px;

  &-track {
    background: lighten($base, 2%);
  }
  &-thumb {
    background: lighten($base, 10%);
    box-shadow: inset 0 0 0 4px lighten($base, 2%);
    border-radius: 16px;
  }
}

.isDarkMode {
  .bordered,
  .bordered-container:not([class*="composerInputMeta-"]),
  .breadcrumb-container {
    border-color: lighten($base, 10%);
  }

  .dropDown-content::after, .dropDown-content::before,
  .dropDown:not(.dropDown--noCaret)::before,
  .dropDown-content {
    background: $base;
    border: $base;
  }

  .dropDown-item-button:focus, .dropDown-item-button:focus-within, 
  .dropDown-item-button:hover, .dropDown-item-link:focus, 
  .dropDown-item-link:focus-within, .dropDown-item-link:hover {
    background-color: darken($base, 5%);
  }
  
  .dropDown-item-button.is-disabled, .dropDown-item-button[disabled],
  .dropDown-item-link.is-disabled, .dropDown-item-link[disabled] {
    background-color: darken($base, 2%);
  }

  .squireToolbar-select-list {
    background: $base;
    color: $text_color;
  }

  .squireToolbar-dropdown-divider {
    background-color: lighten($base, 10%);
  }

  .squireToolbar-select-item:hover {
    background: darken($base, 2%);
  }

  // Compose window
  #pm_composer .composer,
  .composerInputMeta-overlay {
    background: $base;
  }

  #pm_composer .composer .fill {
    background: $base;
  }

  .composer-body-container textarea {
    background: $base;
  }

  .composer-addresses-item {
    background: darken($base, 5%);
  }
  
  
  .composer-addresses-autocomplete {
    ul {
      background: darken($base, 5%);
    }
    
    li[aria-selected="true"],
    li:hover {
      background: $base;
    }
  }

  // Email tags present in new message window
  .autocompleteEmails-item {
    background-color: darken($base, 2%);
    border-color: darken($base, 2%);
  }

  .autocompleteEmails-label {
    border-left: 1px solid lighten($base, 10%);
    border-right: 1px solid lighten($base, 10%);
  }

  .composerOptions-container.show {
    background: darken($base, 2%);

    .shadow-container {
      background: $base;
      color: $text_color;
    }
  }

  .pm-button.pm-button--primary {
    background: darken($highlight, 10%);
    color: $text_color;
    border-color: darken($highlight, 10%);
  }

  .pm-button.pm-button--primary:hover {
    background: $highlight;
    color: $text_color;
  }

  .is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] {
    background-color: darken($base, 2%);
    border-color: lighten($base, 10%);
    color: darken($text_color, 10%);
  }

  .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 {
    color: $text_color;
    background-color: $base;
    border-color: lighten($base, 10%);
  }

  .pm-group-buttons > .pm-group-button.pm-button--primary {
    border-color: lighten($base, 10%);
  }

  .pm-button-blueborder {
    border-color: $highlight;
    color: $highlight;
  }

  .pm-button-blueborder:hover {
    border-color: lighten($highlight, 5%);
    color: lighten($highlight, 5%);
  }

  [class*="squireToolbar-row"] .squireToolbar-action-mode:active, [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
    background: lighten($base, 2%) !important;
  }

  .squireToolbar-separator {
    background: lighten($base, 5%);
  }

  .composerTime-container,
  [class*="composer-field"] {
    color: $text_color;
  }

  .composerInputMeta-overlay-fakefield {
    border-color: $text_color;
  }

  // Encryption icon
  .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg {
    color: white;
  }

  // Message items
  .conversation {
    border-color: lighten($base, 10%);
  }

  .main-area,
  .main-area--noHeader, 
  .main-area--withToolbar,
  .main-area--withToolbar--noHeader,
  [class*="block-info-"] {
    color: $text_color;
  }

  [class*="block-info"] {
    background-color: lighten($base, 10%);
    color: $text_color;
  }

  .fill-global-grey {
    fill: $highlight;
  }

  .starbutton {
    fill: $extra_color;
  }

  // Read message
  .bg-global-light, kbd {
    background: $base;
  }

  // Contacts items and header
  .item-container, .item-container-row, .contactsummary-container {
    background: $base;
  }

  .items-column-list-inner, .ReactVirtualized__Grid__innerScrollContainer {
    border-color: lighten($base, 10%);

    .item-container, .item-container-row {
      border-color: lighten($base, 10%);
    }
  }

  // Unread, not active
  .item-container:not(.item-is-selected):not(.read):not(.active),
  .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active),
  .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .squireToolbar-container {
    background: lighten($base, 5%);
  }

  // Active
  .item-container.active, .item-is-selected {
    background: darken($base, 2%);
    .flex-item-fluid {
      color: $highlight;
    }
  }

  // Selected message checkbox
  .item-icon {
    background-color: $base;
    border: 1px solid darken($text_color, 5%);
  }

  .selectBoxElement-container:hover .item-icon {
    background-color: $base;
    border: 1px solid darken($highlight, 5%);

    .item-icon-fakecheck-icon {
      fill: darken($highlight, 5%);
    }
  }

  .selectBoxElement-container {
    color: $text_color;
  }

  .selectBoxElement-container:hover .item-checkbox:checked + .item-icon {
    background-color: darken($highlight, 5%);
    border-color: darken($highlight, 5%);
  }

  .item-checkbox + .item-icon:hover,
  .item-checkbox:hover + .item-icon {
    background-color: darken($base, 5%);
  }

  // Message list background area
  .items-column-list,
  .elementList-container-row {
    background-color: $base;
  }

  // Current message panel
  .composer-container {
    background: lighten($base, 5%);
  }

  .message-header {
    background-color: lighten($base, 5%);
  }

  .view-column-detail {
    background-color: $base;
  }

  details:first-child {
    border-color: lighten($base, 10%);
  }

  .items-column-list,
  .message-container, 
  .message-attachments {
    border-color: lighten($base, 10%);
  }

  .message-container:not(.sent):not(.draft) .message-header.message-summary::before, 
  .message-header.is-inbound::before {
    border-top: 1px solid lighten($base, 10%);
    border-left: 1px solid lighten($base, 10%);
    background-color: lighten($base, 5%);
  }

  // Mailing list block
  .message-infobox {
    background-color: $base;
  }

  // Email body background, text and links
  .message-content.frame.message-frame {
    background: white;
    color: black;
  }

  .block-info-standard, .bodyDecrypted blockquote {
    border-color: $highlight;
  }

  .squireDropdown-item-label {
    color: $text_color;
  }

  .squireToolbar-action-color {
    background: transparent;
  }

  // This forces the background of a new message to used the base color.
  .angular-squire-iframe body {
    color: $text_color;
    background: lighten($base, 5%);

    a {
      color: $highlight;
    }
  }

  .plaintext-editor {
    color: $text_color;
  }

  // Attachment button
  .pm-button, .pm-button--info, .pm-button--redborder {
    background: $base;
    border-color: lighten($base, 10%);
    color: $text_color;
  }

  .message-attachmentInfo {
    border-color: lighten($base, 10%);
  }

  .is-hover.pm-button--info, .is-hover.pm-button--redborder,
  .pm-button--info:focus, .pm-button--info:focus-within,
  .pm-button--info:hover, .pm-button--redborder:focus,
  .pm-button--redborder:focus-within, .pm-button--redborder:hover,
  .pm-button.is-hover, .pm-button:focus-within, 
  .pm-button:hover:not(.pm-button--primary) {
    color: $highlight;
  }

  .pm-button:focus {
    color: $text_color;
  }

  .is-disabled.pm-button--info,
  .is-disabled.pm-button--redborder,
  .pm-button--info[disabled],
  .pm-button--redborder[disabled],
  .pm-button.is-disabled,
  .pm-button[disabled] {
    background: lighten($base, 10%);
  }

  .is-active.pm-button--info,
  .is-active.pm-button--redborder,
  .pm-button--info:not(div):active,
  .pm-button--redborder:not(div):active,
  .pm-button.is-active, .pm-button:not(div):active {
    background: lighten($base, 10%);
    color: $highlight;
  }

  // Dropdowns
  .dropDown-content {
    background: $base;
    color: $text_color;

    button {
      color: $text_color;
    }

    .elementsSelector-btn-action,
    .dropDown-item:hover {
      color: $text_color;
    }

    .dropDown-item:hover {
      background: lighten($base, 5%) !important;
    }

    .dropDown-item + .dropDown-item {
      border-top: 1px solid lighten($base, 10%);
    }

    .dropDown-item {
      .color-global-grey {
        color: $text_color;
      }
    }
  }

  .dropDown {
    .dropDown-content {
      &::before, &::after {
        border-bottom-color: $base;
      }
    }
  }

  .dropDown--right-bottom {
    &::before {
      border-right-color: $base;
    }

    .dropDown-content {
      &::before, &::after {
        background: $base;
      }
    }
  }

  .dropDown--bottom-right {
    .dropDown-content {
      &::before, &::after {
        background: $base;
      }
    }
  }

  .dropDown--bottom-left::before, 
  .dropDown--bottom-right::before, 
  .dropDown--bottom::before {
    border-bottom-color: lighten($base, 10%);
  }

  .dropDown--bottom-right {
    border: 1px solid lighten($base, 10%);
  }

  .pm-field-icon-container[type="search"], .pm-field[type="search"] {
    background-color: lighten($base, 5%);
  }

  .dropDown-contentInner {
    background-color: $base;

    &::before, &::after {
      background-color: $base;
    }

    .dropDown-item span {
      color: $text_color !important;
    }
  }

  .searchbox-field[type="search"]:not(#global_search) {
    background: $text_color;
    color: $base;
  }

  // Links

  .link:active, .link:focus, .link:hover, 
  a:active, a:focus, a:hover,
  .pm-button--link:hover,
  .composerInputMeta-label:hover {
    color: lighten($highlight, 5%);
  }

  // Modal
  .pm-modal, .pm-modalContentInner {
    background-color: $base;
    color: $text_color;

    &::before, &::after {
      background-color: $base;
    }
    
    .labelColorSelector-item-mask {
      border: 2px solid lighten($base, 15%);
    }
  }

  .pm-button--primaryborder, .pm-button-blueborder {
    border-color: $highlight;
    color: $highlight;
    background-color: lighten($base, 5%);
    transition: background-color .2s ease-in-out;
  }

  .is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus,
  .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover,
  .pm-button-blueborder.is-hover, .pm-button-blueborder:focus,
  .pm-button-blueborder:focus-within, .pm-button-blueborder:hover {
    border-color: $highlight;
    color: $highlight;
    background-color: darken($base, 1%);
  }

  .scrollshadow-static {
    background: $base;
  }

  // Input fields
  .pm-field, .pm-field-icon-container,
  .focus.pm-field-icon-container, .pm-field-icon-container:focus,
  .pm-field-icon-container:focus-within, .pm-field.focus,
  .pm-field:focus, .pm-field:focus-within,
  .composerInputMeta-overlay-fakefield,
  .composerInputMeta-autocomplete {
    color: $text_color;
    background-color: lighten($base, 5%);

    &::placeholder {
      color: darken($text_color, 5%);
    }
  }

  .composerInputMeta-autocomplete input {
    color: $text_color;
    background-color: lighten($base, 5%);

    &::placeholder {
      color: darken($text_color, 5%);
    }
  }

  select.pm-field, select.pm-field-icon-container {
    background-color: lighten($base, 5%);
    color: $text_color;
  }

  // Storage progress modal
  .storageProgress-content.dropDown-content--rightbottom {
    &::before {
      border-right-color: $base;
    }
  }

  // Settings panel
  .sticky-title {
    background: lighten($base, 2%);
  }

  .bg-global-highlight {
    background-color: $base;
  }

  .bg-white-dm {
    background-color: lighten($base, 5%);
  }

  .main-area, .main-area--noHeader, 
  .main-area--withToolbar,
  .main-area--withToolbar--noHeader, 
  [class*="block-info-"] {
    color: $text_color;
  }

  .main-area, .main-area--noHeader, 
  .main-area--withToolbar, .main-area--withToolbar--noHeader {
    background: $base;
  }

  .context-bar {
    background: $base;
  }

  .subnav {
    background: lighten($base, 5%);
    
    .link, a {
      color: $highlight;
    }
    
    .link:active, .link:focus, .link:hover, a:active, a:focus, a:hover {
      color: lighten($highlight, 5%);
    }
  }

  // Toggle button
  .pm-toggle-label {
    border-color: lighten($base, 10%);
    background: lighten($base, 5%);

    &::before {
      background: $base;
    }

    .pm-toggle-label-img {
      fill: $text_color;
    }
  }

  // Plans table
  .pm-plans-table-row--highlighted {
    background-color: $base;
  }

  // Forms
  .pm-checkbox-fakecheck,
  .pm-radio-fakeradio {
    background: transparent;
  }

  [class*="icon-"].color-primary {
    color: $highlight;
  }

  .color-global-grey-dm {
    color: $highlight;
  }
}