@import "../variables.scss";
@import "hooks.scss";

.welcome-panel,
.postbox {
  @include make-card;
  .postbox-header {
    border-color: $global-border;
    .handle-actions {
      margin-right: 10px;
    }
  }
  .inside {
    padding: 0 20px 20px;
    margin-top: 20px;
  }
  .handle-order-higher,
  .handle-order-lower,
  .handlediv {
    @include make-round-icon-button;
    background: none;
  }
}
.metabox-holder .postbox > h3,
.metabox-holder .stuffbox > h3,
.metabox-holder h2.hndle,
.metabox-holder h3.hndle {
  padding: 10px 20px;
}

#wpcontent #welcome-panel {
  margin: 40px;
}

.upload-plugin .wp-upload-form,
.upload-theme .wp-upload-form {
  background: none;
}
input.a2020-muted-input {
  background: #f8f8f8;
}
.a2020-label-tag {
  color: $global-primary-background;
  background: $global-primary-muted;
  font-weight: bold;
  padding: 10px;
  border-radius: 4px;

  &.green {
    color: #27c389;
    background: #34dc9d33;
  }
  &.muted {
    color: #777;
    background: rgb(242, 242, 242);
  }
  a {
    color: $global-primary-background !important;
  }
  .material-icons-outlined {
    font-size: 20px;
  }
  &.primary {
  }
  &.errormsg {
    color: #f0506e;
    background: #f0506e2e;
  }
  &.success {
    color: #06a067;
    background: #34dc9d2e;
  }
  &.warning {
    background: #ff8a2f2b;
    color: #ff8a2f;
  }
}

.a2020_night_mode {
  .a2020-label-tag.muted {
    background: $light-dark;
    color: #fff;
  }
}

.a2020-post-label {
  font-size: 12px;
  text-transform: none;
  border-radius: 4px;
  color: $global-primary-background;
  background: #84afff30;
  border: none;
  text-transform: capitalize;
  padding: 5px;
}

.admin2020loaderwrap.inline {
  width: auto;
  position: absolute;
  top: 7px;
  bottom: auto;
}
.a2020-post-label {
  font-size: 12px;
  text-transform: none;
  border-radius: 4px;
  color: $global-primary-background;
  background: #84afff30;
  border: none;
  text-transform: capitalize;
  padding: 5px;
  &.Published {
    background: #34dc9d30 !important;
    color: #06b775 !important;
  }
  &.Inherit {
    background: #84afff30 !important;
    color: $global-primary-background !important;
  }
  &.Private,
  &.Bin {
    background: #f0506e1a !important;
    color: $global-danger-background !important;
  }
  &.Pending,
  &.Draft {
    color: #ff7307 !important;
    background: #faa05a2b !important;
  }
}
highlight {
  background: #ffc61e42;
  border-radius: 4px;
}

.a2020-notification-tag {
  color: $global-primary-background;
  background: transparent;
  font-weight: bold;
  padding: 10px 0;
  border-bottom: 1px solid $global-border;
  cursor: pointer;
  &.muted {
    color: #777;
    background: rgb(242, 242, 242);
  }
  .material-icons-outlined {
    font-size: 20px;
  }
  &.primary {
  }
  &.errormsg {
    color: #f0506e;
  }
  &.success {
    color: #06a067;
  }
  &.warning {
    color: #ff8a2f;
  }
}

.a2020-warning-count {
  border-radius: 4px;
  background: #ff8a2f2b;
  color: #ff8a2f;
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 15px;
  font-size: 12px;
  display: inline;
  font-weight: bold;
  &.success {
    color: #27c389;
    background: #34dc9d33;
  }
}

.community-events ul {
  background: none;
  color: $global-color;
  li {
    color: $global-color;
  }
  * {
    border-color: $bordercolor;
  }
  li ~ li {
    border-color: $bordercolor;
  }
}
.form-table {
  @include make-card;
  padding: 20px;
  border-collapse: initial;
  background: $global-inverse-color;
  box-sizing: border-box;
}
.plugin-card {
  @include make-card;
  .plugin-card-bottom {
    background: $global-inverse-color;
  }
  .plugin-icon {
    border-radius: 30px;
  }
}
.stuffbox {
  @include make-card;
}
.wp-filter {
  background: none;
  padding: 0;
  margin: none;
  border: none;
  box-shadow: none;
  .search-form {
    margin-bottom: 20px;
    select,
    input {
      margin-top: 0 !important;
    }
  }
}
#plugin-information-footer {
  background: $global-inverse-color;
  .button.button-primary {
    @include make-primary-button;
  }
}
#plugin-information-content {
  .fyi {
    background: $global-inverse-color;
  }
  .contributors {
    img {
      border-radius: 50%;
    }
  }
}
#plugin-information-tabs {
  background: $global-muted-background;
}
.theme-browser {
  margin-top: 20px;
  .theme {
    @include make-card;
    overflow: hidden;
    .theme-actions {
      background: $bordercolor;
    }
  }
}
.filter-group {
  @include make-card;
}
.widgets-holder-wrap {
  @include make-card;
}
.filter-drawer {
  background: none;
  border-top: none;
}
.widget-access-link {
  margin-right: 20px;
}
.theme-overlay {
  .theme-actions {
    background: $global-muted-background;
  }
}
.theme-browser .theme .theme-actions .button-primary {
  line-height: 10px;
}
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active,
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover {
  color: $global-primary-background;
}

.js #dashboard_quick_press .drafts {
  border-color: $global-border;
  padding-bottom: 20px;
}
body #dashboard-widgets .postbox form .submit {
  margin-bottom: 5px;
  display: inline-block;
}

#bulk-titles div a:before,
.notice-dismiss:before,
.tagchecklist .ntdelbutton .remove-tag-icon:before,
.welcome-panel .welcome-panel-close:before {
  content: "\f335";
}

#login .message,
.error,
.is-dismissible,
.notice,
.update-nag,
.updated {
  margin: 0 !important;
  margin-bottom: 20px !important;
  position: relative;
  width: 100%;
  padding: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: none !important;
  border-left: 4px solid $global-primary-background !important;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: auto;
}
.metabox-holder .postbox > h3,
.metabox-holder .stuffbox > h3,
.metabox-holder h2.hndle,
.metabox-holder h3.hndle {
  font-size: 1rem;
}
.postbox .inside,
#dashboard-widgets .postbox .inside {
  padding: var(--a2020-card-padding);
}
.metabox-holder .postbox > h3,
.metabox-holder .stuffbox > h3,
.metabox-holder h2.hndle,
.metabox-holder h3.hndle,
.welcome-panel,
.form-table,
.plugin-card-top,
.plugin-card-bottom,
#poststuff .stuffbox > h3,
#poststuff h2,
#poststuff h3.hndle,
#postdivrich,
.a2020_admin_theme .uk-card-small .uk-card-header,
.a2020_admin_theme .uk-card-small .uk-card-body,
#poststuff .stuffbox > h2,
#post-body #post-body-content #namediv h2 {
  padding: var(--a2020-card-padding);
}
.stuffbox {
  .form-table {
    box-shadow: none;
  }
}
.a2020_admin_theme .uk-card-small .uk-card-body {
  overflow: auto;
}
#postdivrich {
  background: $global-inverse-color;
  margin-top: 20px;
}
.misc-pub-section {
  padding-left: var(--a2020-card-padding);
  padding-right: var(--a2020-card-padding);
}
#misc-publishing-actions {
  padding-bottom: var(--a2020-card-padding);
  padding-top: var(--a2020-card-padding);
}

#major-publishing-actions #publish,
#delete-action,
#publishing-action {
  width: 100%;
  margin-left: 0;
}
.spinner {
  border-radius: 50%;
  background-image: none;
  opacity: 1;
  &::after {
    box-sizing: border-box;
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--a2020-primary);
    border-left: 2px solid var(--a2020-primary);
    border-radius: 50%;
    opacity: 1;
    animation-name: loaderbutton;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}
#major-publishing-actions {
  background: $global-inverse-color;
  padding: var(--a2020-card-padding);
  display: flex;
  flex-direction: column;
  #publishing-action,
  #save {
    order: 1;
    width: 100%;
    margin-left: 0;
    position: relative;
    .spinner {
      position: absolute;
      top: 5px;
      left: 10px;
      bottom: 5px;
      margin: 0;
    }
  }
  #delete-action {
    order: 2;
  }
}

@keyframes loaderbutton {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.a2020_admin_theme .quickstart-storage-setting {
  background: none;
}
.ui-dialog {
  border-radius: 4px;
}
////NIGHT MODE

.a2020_night_mode.wp-core-ui {
  .card,
  .health-check-header,
  .health-check-accordion-trigger {
    background: $dark;
  }
  .alternate,
  .striped > tbody > :nth-child(odd),
  ul.striped > :nth-child(odd) {
    background: $mid-dark;
  }

  .health-check-accordion-trigger {
    .title {
      color: #fff;
    }
    .badge {
      color: $global-warning-background;
    }
  }
  .importer-title {
    color: $global-primary-background;
  }
  .health-check-accordion-panel {
    background: $mid-dark;
  }
}
.a2020_night_mode {
  .welcome-panel,
  .postbox {
    @include make-card-dark;
    .postbox-header {
      border-color: $inverse-global-border;
      border-top: 1px solid $bordercolor;
    }
  }
  .widefat {
    ol,
    p,
    ul {
      color: $inverse-global-inverse-color;
    }
  }
  .ui-dialog {
    background: $dark;
    border-color: $bordercolor;
    .ui-dialog-titlebar,
    .ui-dialog-buttonpane {
      background: $dark;
      border-color: $bordercolor;
    }
  }
  #postdivrich {
    background: $mid-dark;
  }
  #dashboard_quick_press .drafts {
    border-color: $inverse-global-border;
    padding-bottom: 20px;
    h2 {
      color: $global-inverse-color;
    }
  }

  #dashboard-widgets h3,
  #dashboard-widgets h4,
  #dashboard_quick_press .drafts h2 {
    color: $global-inverse-color;
  }

  .comment-ays,
  .feature-filter,
  .imgedit-group,
  .popular-tags,
  .stuffbox,
  .widgets-holder-wrap,
  .wp-editor-container,
  p.popular-tags,
  table.widefat {
    background: $mid-dark;
  }
  .plugin-card {
    @include make-card-dark;
    .plugin-card-bottom {
      background: $mid-dark;
      border-top: 1px solid $inverse-global-border;
    }
  }
  .form-table {
    @include make-card-dark;
    color: inherit;
    * {
      color: inherit;
    }
    th,
    label {
      color: inherit;
    }
  }
  .handle-order-higher,
  .handle-order-lower,
  .handlediv {
    @include make-round-icon-button-dark;
    background: none;
  }

  #dashboard-widgets .postbox-container .empty-container {
    outline: 3px dashed $inverse-global-border;
  }
  #activity-widget #the-comment-list .comment-item {
    background: $mid-dark;
  }

  #plugin-information-footer {
    background: $dark;
    border-color: $inverse-global-border;
  }

  #plugin-information-content {
    background: $dark;
    .fyi {
      background: $dark;
      border-color: $inverse-global-border;
      .counter-back {
        background: $mid-dark;
      }
    }
  }
  #plugin-information-tabs {
    background: #333;
    border-color: $inverse-global-border;
    a.current {
      background: $dark;
      color: $global-primary-background;
      border-color: $inverse-global-border;
      border-bottom: 1px solid $dark;
    }
  }

  .theme-browser .theme .theme-name {
    background: $mid-dark;
  }

  .theme-overlay {
    .theme-wrap {
      background: $dark;
      border: 1px solid $inverse-global-border;
      border-radius: 4px;
    }
    .theme-backdrop {
      background: rgb(18 18 18 / 72%);
    }
    .theme-header {
      background: $dark;
      border-color: $inverse-global-border;
      * {
        border-color: $inverse-global-border;
      }
      button {
        &:hover {
          background: $mid-dark;
          border-color: $inverse-global-border;
        }
      }
    }
    .theme-about {
      background: $dark;
      * {
        color: inherit;
      }
      .theme-name {
        color: $global-inverse-color;
      }
    }
    .theme-actions {
      background: $mid-dark;
      border-color: $inverse-global-border;
    }
  }
  #screen-meta.a2020_open_sc {
    background: $dark;
  }
  .wp-pointer-top,
  .wp-pointer-undefined {
    filter: invert(1) hue-rotate(180deg);
    color: $dark;
  }
}
