/**
 * Dark Mode CSS
 */

/**
 * The colours below are loosely based on the WordPress branding colours.
 * https://make.wordpress.org/design/handbook/design-guide/foundations/colors/
 */
$white:           #ffffff;
$black:           #000000;
$blue:            #0073aa;
$medium-blue:     #00a0d2;
$clear:           transparent;

$accent-red:      #dc3232;
$accent-orange:   #f56e28;
$accent-yellow:   #ffb900;
$accent-green:    #46b450;
$accent-blue:     $blue;
$accent-purple:   #826eb4;

$base-grey:       #23282d;
$light-grey:      #bbc8d4;
$heavy-grey:      #37444c;
$dark-grey:       #32373c;
$ultra-grey:      #191f25;
$dark-silver:     #50626f;
$base-blue:       #2e74aa;
$light-blue:      #4092d2;
$dark-blue:       #2c5f88;
$ultra-blue:      #1f3f58;
$bright-blue:     #30ceff;

$editor-lavender: #c678dd;
$editor-sunglo:   #e06c75;
$editor-olivine:  #98c379;

html.dark-mode body:not(.block-editor-page) {

  background-color: $base-grey;
  color: $light-grey;

  #wpbody,
  #wpfooter {

    background-color: $base-grey;
    color: $light-grey;

    p,
    code,
    kbd,
    label,
    .form-table th,
    .form-wrap label,
    .form-wrap p,
    p.description,
    .importer-title,
    .menu-in-location,
    .theme-location-set {

      color: $light-grey;

    }

    #wpadminbar {

      * {

        color: inherit !important;

      }

    }

    table {

      background-color: $ultra-grey;
      border-color: $dark-grey;

      p {

        color: $light-grey;

      }

      tr {

        background-color: $base-grey;

        th,
        td {

          background-color: transparent;
          color: $light-grey;

        }

      }

      &.widefat {

        border-color: $dark-grey;

        thead,
        tfoot {

          th,
          td {

            border-top-color: $ultra-grey;
            border-bottom-color: $base-grey;
            color: $light-grey;

          }

        }

        p {

          color: $light-grey;

        }

      }

      &.striped {

        tbody {

          tr {

            background-color: $dark-grey;

            &:nth-child(odd) {

              background-color: $base-grey;

            }

          }

        }

      }

      &.plugins {

        .active td,
        .active th {

          background-color: $ultra-grey;

        }

        tr.active+tr.inactive td,
        tr.active+tr.inactive th,
        tr.active.plugin-update-tr+tr.inactive td,
        tr.active.plugin-update-tr+tr.inactive th {

          box-shadow: inset 0 1px 0 rgba(0,0,0,.02), inset 0 -1px 0 $base-grey;

        }

      }

      &.wp-list-table {

        tr {

          background-color: $dark-grey;

          th, td {

            color: $light-grey;

            *::before,
            *::after {

              color: $light-grey;

            }

          }

        }

      }

      &.updates-table {

        tr {

          background-color: $dark-grey;

        }

      }

    }

    .tablenav {

      p,
      span {

        color: $light-grey;

      }

    }

    .subsubsub,
    .subsubsub li {

      color: $light-grey;

      a {

        color: $bright-blue;

        span.count,
        &.current span.count {

          color: $light-grey;

        }

      }

      a.current {

        color: $white;

      }

    }

    .tablenav {

      .tablenav-pages-navspan {

        background: $base-grey;
        border-color: $ultra-grey;
        color: $light-grey;

      }

      .tablenav-pages a {

        background: $dark-silver;
        border: 1px solid $base-grey;

        span {

          color: $white;

        }

        &:hover {

          background: $medium-blue;
          border-color: $base-grey;

        }

      }

    }

    .notice,
    .error,
    .updated,
    .update-nag {

      background-color: $ultra-grey;

    }

    .notice p,
    .updated p,
    .fileedit-sub,
    .about-wrap h1,
    .about-wrap .about-text,
    #bulk-titles div a:before,
    .notice-dismiss:before,
    .tagchecklist .ntdelbutton .remove-tag-icon:before,
    .welcome-panel .welcome-panel-close:before,
    .try-gutenberg-panel .try-gutenberg-panel-close:before,
    .pressthis-js-toggle .dashicons,
    .try-gutenberg-panel p,
    .try-gutenberg-panel-column p.about-description,
    .howto,
    .item-type,
    .is-submenu,
    .nonessential,
    #future-posts ul span,
    #published-posts ul span,
    #dashboard-widgets h3,
    #dashboard-widgets h4,
    #dashboard_quick_press .drafts h2,
    #dashboard_right_now li a:before,
    #dashboard_right_now li span:before,
    .welcome-panel .welcome-icon:before,
    .community-events li,
    #dashboard_activity .subsubsub a .count,
    #dashboard_activity .subsubsub a.current .count,
    #latest-comments #the-comment-list .comment-meta,
    #dashboard_quick_press .drafts li time,
    #title-wrap #title-prompt-text,
    .textarea-wrap #content-prompt-text,
    #post-body ul.add-menu-item-tabs li.tabs a,
    #post-body ul.category-tabs li.tabs a,
    #side-sortables .add-menu-item-tabs .tabs a,
    #side-sortables .category-tabs .tabs a,
    .wp-tab-bar .wp-tab-active a,
    .link-to-original,
    .accordion-section-title:after,
    .handlediv,
    .item-edit,
    .postbox .handlediv.button-link,
    .sidebar-name-arrow,
    .edit-comment-author,
    #comment-link-box,
    #edit-slug-box,
    .inactive-sidebar .description,
    .widget-holder .description,
    #available-widgets .widget-description,
    #widgets-right a.widget-control-edit,
    .in-widget-title,
    .edit-attachment-frame .attachment-info .filename,
    .attachment-details .setting span,
    .compat-item label span,
    .media-sidebar .setting span,
    .upload-plugin .install-help,
    .upload-theme .install-help,
    .subtitle {

      color: $light-grey;

    }

    .try-gutenberg-panel-content hr {

      border-color: $ultra-grey;

    }

    .spinner {

      background-color: $white;
      border: 1px solid $white;
      border-radius: 100%;

    }

    code,
    kbd {

      background-color: rgba(0, 0, 0, 0.25);

    }

    ul#adminmenu a.wp-has-current-submenu:after,
    ul#adminmenu>li.current>a.current:after {

      border-right-color: $base-grey;

    }

    #activity-widget #the-comment-list .comment,
    #activity-widget #the-comment-list .pingback {

      -webkit-box-shadow: inset 0 1px 0 rgb(35, 41, 47);
      box-shadow: inset 0 1px 0 rgb(35, 40, 46);

    }

    #templateside {

      > ul {

        background-color: $base-grey;
        border-color: $dark-grey;

        li {

          a,
          span {

            background-color: $clear;

            &.hover,
            &:hover {

              background-color: $dark-grey;
              color: $light-grey;

            }

          }

        }

      }

    }

    p.popular-tags,
    .upload-plugin .wp-upload-form,
    .upload-theme .wp-upload-form,
    #screen-meta,
    #contextual-help-link-wrap,
    #screen-options-link-wrap,
    .quicktags-toolbar,
    .attachment-media-view,
    .media-widget-preview.media_audio,
    .media-widget-preview.media_image,
    .media-upload-form .media-item {

      background-color: $dark-grey;
      border-color: $ultra-grey;

    }

    #show-settings-link,
    #contextual-help-link {

      box-shadow: none;

    }

    #contextual-help-link-wrap,
    #screen-options-link-wrap {

      color: $light-grey;

      button {

        background-color: $dark-grey;
        border-color: $ultra-grey;
        color: $light-grey;

        &::after {

          color: $light-grey;

        }

        &:hover {

          background-color: $dark-grey;
          border-color: $ultra-grey;
          color: $white;

          &::after {

            color: $white;

          }

        }

      }

    }

    #wpwrap,
    #contextual-help-back,
    #plugin-information-content,
    .notification-dialog {

      background-color: $base-grey;
      border-color: $ultra-grey;

    }

    .widgets-holder-wrap {

      background-color: $base-grey;
      border-color: $clear;

      .sidebar-name {

        &:hover {

          button {

            span {

              color: $white;

            }

          }

        }

      }

      .widgets-sortables {

        background-color: $base-grey;

      }

    }

    #widgets-left,
    #widgets-right {

      .widget {

        .widget-top {

          &:hover {

            border-color: $dark-grey;

          }

          .widget-control-edit {

            background-color: $dark-grey;
            border-left-color: $clear;
            color: $light-grey;

            &:hover {

              background-color: $dark-silver;
              border-left-color: $clear;
              color: $white;

            }

          }

        }

        ul.widgets-chooser-sidebars {

          border-color: $ultra-grey;

          li {

            background-color: $dark-grey;
            border-color: $base-grey;
            color: $light-grey;

            &.widgets-chooser-selected {

              background-color: $accent-blue;
              color: $white;

            }

            &:hover {

              background-color: $ultra-grey;
              color: $white;

            }

          }

        }

      }

    }

    .contextual-help-tabs {

      .active a {

        background-color: $base-grey;
        border-color: $dark-grey;
        color: $light-grey;

      }

      a:hover {

        color: $white;

      }

    }

    #screen-meta-links .show-settings:active,
    #screen-meta-links .show-settings:focus,
    #screen-meta-links .show-settings:hover,
    #contextual-help-wrap h5,
    #screen-options-wrap h5,
    #screen-options-wrap legend,
    #screen-meta-links .show-settings {

      color: $light-grey;

      &:hover {

        color: $white;

        &::before,
        &::after {

          color: $white;

        }

      }

    }

    .try-gutenberg-panel,
    .welcome-panel,
    .postbox,
    .card,
    .stuffbox,
    #activity-widget #the-comment-list .comment-item,
    .community-events ul,
    .wp-filter,
    .menu-edit #post-body {

      background-color: $dark-grey;
      border-color: $ultra-grey;
      color: $light-grey;

      p,
      span {

        color: $light-grey;

      }

    }

    .menu-edit {
      #nav-menu-header, #nav-menu-footer {
        background: $ultra-grey;
      }
    }

    .card {

      table,
      thead,
      tbody,
      tfoot,
      tr,
      th,
      td {

        background-color: $clear;

      }

    }

    .try-gutenberg-panel img,
    .activity-block,
    #dashboard_activity .subsubsub,
    #dashboard_right_now .sub,
    .community-events li:first-child,
    .community-events li~li,
    .community-events-footer,
    .community-events .activity-block.last {

      border-color: $base-grey;

    }

    .pressthis-bookmarklet span {

      color: $base-grey;

    }

    .color-option.selected,
    .color-option:hover,
    .accordion-section-content,
    .filter-drawer,
    .wp-filter .favorites-form,
    .filter-group,
    .filtered-by .tag {

      background-color: $dark-grey;
      border-color: $ultra-grey;

    }

    .plugin-card {

      background-color: $dark-grey;

      p,
      .column-compatibility span:before {

        color: $light-grey;

      }

    }

    .plugin-card-bottom,
    .notice-warning.notice-alt,
    #the-comment-list .unapproved td,
    #the-comment-list .unapproved th,
    #the-comment-list div.undo,
    #the-comment-list tr.undo {

      background-color: $ultra-grey;

    }

    .plugin-card,
    .plugin-card-bottom,
    #nav-menu-header,
    #menu-management .menu-edit,
    .wp-editor-container {

      border-color: $ultra-grey;

    }

    .wp-filter .button.drawer-toggle {

      &,
      &::before {

        color: $light-grey;

      }

      &:hover,
      &:focus,
      &:active {

        &,
        &::before {

          color: $white;

        }

      }

    }

    .filter-links li a {

      border-color: $dark-grey;
      color: $light-grey;

      &.current {

        border-color: $light-grey;
        color: $light-grey;

      }

    }

    .control-section .accordion-section-title,
    .customize-pane-child .accordion-section-title,
    &.js .control-section .accordion-section-title:focus,
    &.js .control-section .accordion-section-title:hover,
    &.js .control-section.open .accordion-section-title,
    &.js .control-section:hover .accordion-section-title {

      background-color: $ultra-grey;
      border-color: $base-grey;
      color: $light-grey;

    }

    #dashboard_right_now .sub,
    .wp-tab-active,
    ul.add-menu-item-tabs li.tabs,
    ul.category-tabs li.tabs,
    .categorydiv div.tabs-panel,
    .customlinkdiv div.tabs-panel,
    .posttypediv div.tabs-panel,
    .taxonomydiv div.tabs-panel,
    .wp-tab-panel {

      background-color: $base-grey;
      border-color: $dark-grey;

    }

    .wp-editor-expand #wp-content-editor-tools,
    #wp-content-editor-tools {

      background-color: $base-grey;
      border-color: $dark-grey;

    }

    .accordion-section,
    .accordion-section.open:hover,
    #menu-management .menu-edit,
    #menu-settings-column .accordion-container,
    .comment-ays,
    .feature-filter,
    .imgedit-group,
    .manage-menus,
    .menu-item-handle,
    .popular-tags,
    .stuffbox,
    .widget-inside,
    .widget-top,
    p.popular-tags,
    .postbox .hndle,
    .stuffbox .hndle,
    .widgets-chooser ul {

      border-color: $base-grey;

    }

    #major-publishing-actions,
    .menu-item-settings,
    .link-to-original,
    &.nav-menus-php #post-body {

      background: $dark-grey;
      border-color: $base-grey;

    }

    .accordion-section-title:hover:after,
    .handlediv:focus,
    .handlediv:hover,
    .item-edit:focus,
    .item-edit:hover,
    .postbox .handlediv.button-link:focus,
    .postbox .handlediv.button-link:hover,
    .sidebar-name:hover .sidebar-name-arrow,
    .widget-action:focus,
    .widget-top:hover .widget-action {

      color: $white;

    }

    .menu-item-handle,
    .widget .widget-top,
    .widget-inside,
    .manage-menus,
    #menu-management {

      background: $ultra-grey;
      border-color: $dark-grey;

    }

    .menu-item-bar .menu-item-handle {

      &,
      &:hover {

        border-color: $base-grey;

      }

    }

    .wp-editor-container,
    .wp-editor-expand #post-status-info {

      border-color: $dark-grey;

    }

    .nav-tab-wrapper,
    .wrap h2.nav-tab-wrapper,
    h1.nav-tab-wrapper {

      border-color: $light-grey;

    }

    .nav-tab {

      background-color: $dark-grey;
      border-color: $ultra-grey;
      color: $light-grey;

      &:focus,
      &:hover {

        background-color: $ultra-grey;

      }

    }

    .nav-tab-active,
    .nav-tab-active:focus,
    .nav-tab-active:focus:active,
    .nav-tab-active:hover,
    .about-wrap h2 .nav-tab-active,
    .media-modal-content {

      background-color: $light-grey;
      border-color: $light-grey;
      color: $ultra-grey;

    }

    .media-frame-content,
    .edit-attachment-frame .attachment-info {

      background-color: $base-grey;
      border-color: $dark-grey;
      color: $light-grey;

    }

    .edit-attachment-frame .edit-media-header .left,
    .edit-attachment-frame .edit-media-header .right,
    &.upload-php .media-modal-close {

      border-color: $base-grey;

    }

    #template textarea {

      background: $ultra-grey;
      border-color: $dark-grey;
      color: $light-grey;

    }

    #templateside .highlight {

      background: $dark-grey;
      color: $light-grey;

    }

    .theme-overlay {

      .theme-backdrop,
      .theme-wrap {

        background: $base-grey;

      }

      .screenshot {

        border-color: $ultra-grey;

      }

      .current-label {

        background: $dark-grey;

      }

      .theme-name,
      .theme-version,
      .theme-author,
      .theme-description {

        color: $light-grey;

      }

      .theme-tags {

        border-color: $ultra-grey;
        color: $light-grey;

        span {

          color: $white;

        }

      }

      .theme-header {

        &,
        .close,
        .left,
        .right {

          border-color: $ultra-grey;

          &:before {

            color: $light-grey;

          }

          &:hover {

            &::before {

              color: $black;

            }

          }

          &.disabled {

            &::before {

              color: $light-grey;

            }

          }

        }

      }

      .theme-actions {

        background-color: $dark-grey;
        border-color: $ultra-grey;

      }

    }

    .theme-browser .theme {

      border-color: $ultra-grey;

      &.active .theme-name,
      &.add-new-theme a:focus,
      &.add-new-theme a:hover {

        &::after {

          background-color: $dark-grey;

        }

      }

      .theme-name,
      .theme-actions,
      .theme-screenshot {

        background-color: $dark-grey;

      }

    }

    #the-comment-list .approve a {

      color: $accent-green;

    }

    .health-check-accordion {
      border-color: $ultra-grey;
    }

    .health-check-header,
    .health-check-accordion-panel {
      background: $ultra-grey;
    }

    .health-check-accordion-trigger {
      background: $light-grey;
    }

  }

  #wp-link {

    h1 {

      background-color: $base-grey;
      border-color: $ultra-grey;
      color: $light-grey;

    }

    #link-selector {

      background-color: $dark-grey;

      .howto {

        color: $light-grey;

      }

      .query-results {

        background-color: $dark-grey;
        border-color: $ultra-grey;

      }

      .query-notice {

        border-bottom-color: $ultra-grey;

        .query-notice-default,
        .query-notice-hint {

          background-color: $dark-grey;
          color: $white;

        }

      }

      ul {

        li {

          background-color: $dark-grey;
          border-color: $ultra-grey;
          color: $light-grey;

          span {

            color: $light-grey;

          }

          &.selected,
          &:hover,
          &:focus {

            background-color: $base-grey;
            color: $white;

          }

        }

      }

    }

    .submitbox {

      background-color: $base-grey;
      border-color: $ultra-grey;

    }

  }

  div.mce-inline-toolbar-grp {

    .wp-link-preview {

      a {

        color: $bright-blue;

        &:hover,
        &:focus {

          color: $blue;

        }

      }

    }

    &.mce-arrow-up {

      &::before {

        border-bottom-color: $ultra-grey;

      }

      &::after {

        border-bottom-color: $dark-grey;

      }

    }

  }

  &.wp-customizer {

    #screen-options-wrap {

      background-color: $ultra-grey;
      border-color: $base-grey;

    }

    .menu-item-settings,
    .menu-item-bar .menu-item-handle {

      background-color: $base-grey;
      border-color: $ultra-grey;
      color: $light-grey;

    }

  }

  #plugin-information {

    &-scrollable {

      #plugin-information-tabs {

        background-color: $ultra-grey;
        border-color: $dark-grey;

        a.current {

          background-color: $base-grey;
          border-color: $dark-grey;
          border-bottom-color: $base-grey;
          color: $light-grey;

        }

      }

      #plugin-information-content {

        background-color: $base-grey;

        .wrap {

          background-color: $base-grey;

        }

        .fyi {

          background: $ultra-grey;
          border-color: $dark-grey;
          color: $light-grey;

          .counter-back {

            background: $light-grey;

          }

          h3, strong {

            color: $light-grey !important;

          }

        }

      }

    }

    &-footer {

      background: $ultra-grey !important;
      border-color: $dark-grey !important;

    }

  }

  #customize-controls {

    border-color: $base-grey;

    .cannot-expand:hover .accordion-section-title,
    .panel-meta.customize-info .accordion-section-title:hover,
    .customize-info .customize-panel-description,
    .customize-info .customize-section-description,
    .no-widget-areas-rendered-notice,
    #customize-outer-theme-controls .customize-info .customize-section-description {

      background-color: $base-grey;
      border-color: $ultra-grey;
      color: $light-grey;

    }

    .control-section .accordion-section-title:focus .menu-in-location,
    .control-section .accordion-section-title:hover .menu-in-location,
    .theme-location-set {

      color: $light-grey;

    }

    #customize-sidebar-outer-content {

      border-color: $dark-grey;

    }

    .customize-panel-back,
    .customize-section-back {

      background-color: $base-grey;
      border-color: transparent;
      color: $light-grey;

    }

    #customize-theme-controls {

      .accordion-section-content,
      .description {

        color: $light-grey;

      }

      .control-panel-content:not(.control-panel-nav_menus) .control-section:nth-child(2),
      .control-panel-nav_menus .control-section-nav_menu,
      .control-section-nav_menu_locations .accordion-section-title,
      #accordion-section-menu_locations > .accordion-section-title,
      .control-section:last-of-type.open,
      .control-section:last-of-type > .accordion-section-title,
      .control-section.open {

        border-color: $ultra-grey;

      }

    }

    .control-section .accordion-section-title:focus,
    .control-section .accordion-section-title:hover,
    .control-section.open .accordion-section-title,
    .control-section:hover > .accordion-section-title {

      &::after {

        color: $light-grey;

      }

      background-color: $ultra-grey;
      border-color: $dark-grey;
      color: $light-grey;

    }

    .accordion-section-title,
    .customize-section-title {

      background-color: $base-grey;
      border-color: $ultra-grey;
      color: $light-grey;

      &:hover {

        background-color: $base-grey;

      }

      h3 {

        color: $light-grey;

      }

    }

    .customize-info {

      border-color: $dark-grey;

      .customize-help-toggle {

        color: $light-grey;

      }

      .accordion-section-title,
      .customize-panel-description {

        background-color: $base-grey;
        border-color: $dark-grey;
        color: $light-grey;

      }

    }

    #customize-theme-controls {

      .control-panel-themes > .accordion-section-title {

        background-color: $base-grey;
        border-color: $ultra-grey;
        color: $light-grey;

      }

    }

    #customize-header-actions,
    .customize-controls-close {

      background-color: $base-grey;
      border-color: $base-grey;
      color: $light-grey;

    }

    .wp-full-overlay-footer {

      background-color: $ultra-grey;
      border-color: $base-grey;
      color: $light-grey;

      .devices {

        box-shadow: none;

      }

    }

    .customize-controls-close {

      border-color: transparent;
      color: $light-grey;

      &:hover {

        color: $white;

      }

    }

    .wp-full-overlay-sidebar-content {

      background-color: $dark-grey;

    }

    .collapse-sidebar-arrow {

      &::before {

        color: $dark-grey;

      }

    }

    .collapse-sidebar {

      span {

        color: $light-grey;

      }

    }

  }

  .media-modal {

    button.media-modal-close {

      background-color: $base-grey;
      border-color: $base-grey;

      &:hover {

        background-color: $dark-silver;
        border-color: $dark-silver;

        span {

          &::before {

            color: $ultra-grey;

          }

        }

      }

      span {

        &::before {

          color: $light-grey;

        }

      }

    }

    .media-menu {

      background: $ultra-grey;
      border-color: $ultra-grey;

      a {

        color: $light-blue;

        &:hover {

          color: $blue;

        }

      }

      .separator {

        border-color: $dark-silver;

      }

      .active,
      .active:hover {

        color: $white;

      }

    }

    .media-router {

      a {

        color: $light-blue;

        &:hover {

          color: $blue;

        }

      }

      .active {

        color: $white;
        background: $base-grey;
        border-color: $ultra-grey;

      }
    }

    .media-sidebar {

      background: $ultra-grey;
      border-color: $white;
      border-left-color: $ultra-grey;

      .setting span {

        color: $light-grey;

      }

      h2 {

        color: $white;

      }

      .attachment-info {

        border-color: $white;

        .details {

          color: $light-grey;

        }

        .filename {

          color: $white;

        }
      }
    }

    .media-selection {

      &:after {

        background-image: none;

      }

    }

    &-content {

      background-color: $base-grey;
      border-color: $ultra-grey;

      .media-frame {

        &-title,
        &-content {

          background-color: $base-grey;
          border-color: $ultra-grey;
          color: $light-grey;

          h1 {

            color: $light-grey;

          }

        }

        &-content {

          .setting {

            span {

              color: $light-grey;

            }

          }

          .upload-ui {

            h2,
            p {

              color: $light-grey;

            }

          }

        }

        &-toolbar {

          .media-toolbar {

            border-color: $ultra-grey;

          }

        }

        &.hide-router {

          .media-frame {

            &-title {

              border-bottom: none;

            }

          }

        }

      }

      .imgedit-wrap {

        .imgedit-settings {

          background-color: $ultra-grey;
          border-color: $dark-silver;

          h2 {

            color: $white;

          }

        }

      }

      .edit-media-header {

        background-color: $ultra-grey;

        button {

          background-color: $ultra-grey;

          &::before {

            color: $light-grey;

          }

        }

      }

      .attachment-media-view {

        background-color: $dark-grey;

      }

      .edit-attachment-frame {

        .edit-media-header {

          .left,
          .right {

            background-color: $ultra-grey;
            border-color: $dark-silver;

          }

        }

        .attachment-info {

          background-color: $ultra-grey;
          border-color: $dark-silver;
          color: $light-grey;

          span,
          .filename {

            color: $light-grey;

          }

        }

      }

    }

    .wp-core-ui {

      .attachment-preview {

        background: $heavy-grey;
        box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.2 ), inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );

      }

      .attachment.selected {

        box-shadow: inset 0 0 0 5px $dark-silver, inset 0 0 0 7px #ccc;

      }

      .attachment:focus,
      .attachment.details {

        box-shadow: inset 0 0 2px 3px $dark-silver, inset 0 0 0 7px $light-blue;

      }

    }

    .embed-url {

      background: $dark-silver;

    }

  }

  #file-editor-warning {

    background-color: $base-grey;
    color: $light-grey;

  }

  #adminmenu a.wp-has-current-submenu:after,
  #adminmenu > li.current > a.current:after {

    border-right-color: $base-grey;

  }

  .notice,
  .error,
  .updated {

    background-color: $ultra-grey;

  }

  .wp-editor-tabs {

    button {

      background-color: $dark-silver;
      border-color: $ultra-grey;
      border-bottom: none;
      color: $light-grey;

      &:hover,
      &:focus {

        background-color: $dark-grey;
        border-color: $dark-grey;
        color: $white;

      }

    }

  }

  .html-active {

    .wp-editor-tabs {

      button.switch-html {

        background-color: $dark-grey;
        border-color: $dark-grey;
        color: $white;

      }

    }

  }

  .tmce-active {

    .wp-editor-tabs {

      button.switch-tmce {

        background-color: $dark-grey;
        border-color: $dark-grey;
        color: $white;

      }

    }

  }

  div.mce {

    &-toolbar {

      &-grp {

        background-color: $dark-grey;
        border-color: $ultra-grey;
        color: $light-grey;

      }

      .mce-btn-group {

        .mce-btn {

          background: $clear;
          border-color: $clear;

          i {

            color: $light-grey;

          }

          &.mce-disabled {

            &:hover,
            &:focus {

              border-color: $ultra-grey;

            }

          }

          &.mce-listbox {

            background-color: $base-grey;
            border-color: $ultra-grey;

            span {

              color: $light-grey;

            }

            i {

              border-top-color: $light-grey;

            }

            &.mce-active,
            &:hover,
            &:focus {

              background-color: $dark-grey;
              border-color: $ultra-grey;

              span {

                color: $white;

              }

              i {

                border-top-color: $light-grey;

              }

            }

            &.mce-active {

              i {

                border-bottom-color: $light-grey;

              }

            }

          }

          &.mce-active,
          &:hover,
          &:focus {

            background: $base-grey;
            border-color: $ultra-grey;
            box-shadow: none;

            i {

              color: $white;

            }

          }

        }

      }

    }

    &-panel {

      background: $dark-grey;

      &.mce-menu {

        border-color: $ultra-grey;

      }

      .mce-menu-item {

        .mce-ico,
        .mce-text {

          color: $light-grey;

        }

        &.mce-active,
        &.mce-selected,
        &:focus,
        &:hover {

          background-color: $blue;

          .mce-ico,
          .mce-text {

            color: $white;

          }

        }

      }

    }

  }

  .wp-pointer {

    &-content {

      background-color: $dark-grey;
      border-color: $ultra-grey;
      color: $light-grey;

      h3 {

        border-color: $ultra-grey;

      }

    }

    &-buttons {

      a.close {

        &,
        &::before {

          color: $light-blue;

        }

        &:hover {

          &,
          &::before {

            color: $white;

          }

        }

      }

    }

    &-left {

      .wp-pointer-arrow {

        border-right-color: $ultra-grey;

        &-inner {

          border-right-color: $dark-grey;

        }

      }

    }

  }

  .CodeMirror {

    background-color: $ultra-grey;
    border-color: $ultra-grey;
    color: $light-grey;

    &-gutter {

      background-color: $base-grey;
      border-color: $ultra-grey;

      &s {

        border-color: $base-grey;

      }

    }

    &-activeline-background {

      background-color: $dark-grey;

    }

    &-linenumber {

      color: $light-grey;

    }

    &-code {

      .cm {

        &-tag,
        &-builtin,
        &-qualifier {

          color: $accent-green;

        }

        &-property {

          color: $light-blue;

        }

        &-number {

          color: $accent-purple;

        }

        &-error	{

          color: $accent-red;

        }

        &-atom {

          color: $accent-yellow;

        }

        &-comment {

          color: $light-grey;

        }

        &-keyword {

          color: $editor-lavender;

        }

        &-def {

          color: $medium-blue;

        }

        &-variable_1,
        &-variable_2 {

          color: $editor-sunglo;

        }

        &-string {

          color: $editor-olivine;

        }

      }

    }

  }

  h1, h2, h3, h4, h5, h6 {

    color: $light-grey;

  }

  .notification-dialog,
  iframe {

    background: $dark-grey;

  }

  .button,
  .button-secondary,
  &.wp-core-ui .button,
  &.wp-core-ui .button-secondary {

    background: $dark-silver;
    border-color: $dark-grey;
    box-shadow: 0 1px 0 $ultra-grey;
    color: $white;

    span {

      &,
      &::before {

        color: $white;

      }

    }

    &:hover,
    &:focus,
    &:active {

      background: $heavy-grey;
      border-color: $dark-grey;
      color: $white;

    }

    &:active {

      background: $dark-grey;
      border-color: $ultra-grey;

    }

    &.active {

      background: $dark-grey;
      border-color: $ultra-grey;

      &:hover {

        background: $heavy-grey;
        border-color: $ultra-grey;

      }

    }

  }

  .button-primary,
  .page-title-action,
  &.wp-core-ui .button-primary,
  .wrap a.page-title-action {

    background: $light-blue;
    border-color: $dark-blue $dark-grey $dark-grey;
    color: $white;
    box-shadow: 0 1px 0 $ultra-grey;
    text-shadow: 0 -1px 1px $dark-grey, 1px 0 1px $dark-grey, 0 1px 1px $dark-grey, -1px 0 1px $dark-grey;

    &.button-hero {

      box-shadow: 0 2px 0 $ultra-blue !important;

      &.active,
      &:active {

        box-shadow: inset 0 3px 0 $base-blue !important;

      }

    }

    &:hover,
    &:focus,
    &:active {

      background: $base-blue;
      border-color: $dark-blue $dark-grey $dark-grey;
      color: $white;
      box-shadow: 0 1px 0 $ultra-grey;
      text-shadow: 0 -1px 1px $dark-grey, 1px 0 1px $dark-grey, 0 1px 1px $dark-grey, -1px 0 1px $dark-grey;

    }

    &:active {

      background: $dark-blue;

    }

  }

  &.wp-core-ui {

    .button-disabled,
    .button-secondary.disabled,
    .button-secondary:disabled,
    .button-secondary[disabled],
    .button.disabled,
    .button:disabled,
    .button[disabled] {

      background: $dark-grey !important;
      border-color: $ultra-grey !important;
      color: $light-grey !important;
      text-shadow: none !important;

    }

  }

  .media-frame {

    input[type=text],
    input[type=password],
    input[type=number],
    input[type=search],
    input[type=email],
    input[type=url],
    select,
    textarea {

      background-color: $dark-silver;
      border-color: $ultra-grey;
      color: $white;

      &::placeholder {

        color: $light-grey;

      }

    }

  }

  #titlediv #title,
  input[type=text],
  input[type=search],
  input[type=radio],
  input[type=tel],
  input[type=time],
  input[type=url],
  input[type=week],
  input[type=password],
  input[type=checkbox],
  input[type=color],
  input[type=date],
  input[type=datetime],
  input[type=datetime-local],
  input[type=email],
  input[type=month],
  input[type=number],
  select,
  textarea {

    background-color: $dark-silver;
    border-color: $ultra-grey;
    color: $white;

    &.readonly,
    &.disabled {

      background-color: $dark-grey;
      color: $light-grey;
      opacity: 0.75;

    }

    &[readonly],
    &[disabled] {

      background-color: $dark-grey;
      color: $light-grey;
      opacity: 0.75;

    }

  }

  input {

    &[type=checkbox]:checked:before {

      color: $white;

    }

    &[type=radio]:checked:before {

      background-color: $white;

    }

  }

  ::-webkit-input-placeholder,
  ::-moz-placeholder,
  :-ms-input-placeholder,
  :-moz-placeholder,
  ::placeholder {

    color: $white;
    opacity: 1;

  }

  a,
  .button-link {

    color: $bright-blue;

    &:hover {

      color: $light-blue;

    }

    &:focus {

      color: $light-blue;
      -webkit-box-shadow: 0 0 0 1px $light-blue, 0 0 2px 1px rgba(0, 160, 210, 0.8);
      box-shadow: 0 0 0 1px $light-blue, 0 0 2px 1px rgba(0, 160, 210, 0.8);

    }

  }

  .wppool-settings-content, .wppool-settings-sidebar {
    background: $base-grey;
  }

  .wppool-settings-sidebar {
    li {
      a {
        &, i {
          color: $light-grey;
        }
      }

      &.active {
        a {
          &, i {
            color: #000;
          }
        }
      }
    }
  }

  .appsero-license-settings {
    background: $base-grey;
    border: 1px solid;

    ::placeholder {
      color: $white;
    }
  }

}

input.readonly, input[readonly], textarea.readonly, textarea[readonly] {

  background-color: $dark-grey;

}