/**
 * Admin styles
 * @package WPGlobus
 */

// Load the Sass string module, for use in the `unicode` function.
@use "sass:string";
// color.adjust() replaces darken()
@use "sass:color";

// Ensure that Unicode characters are embedded in ASCII-encoded form.
@function unicode($str) {
  @return string.unquote("\"") + string.unquote(string.insert($str, "\\", 1)) + string.unquote("\"");
}

@mixin dashicon-checkmark() {
  content: unicode("f147");
}

@mixin dashicon-triangle-right() {
  content: unicode("f522");
}

@mixin dashicon-globus() {
  content: unicode("f319");
}

// To use in the Redux Sortable instead of elusive
@mixin dashicons-image-flip-vertical() {
  content: unicode("f168");
}

@mixin dashicons-move() {
  content: unicode("f545");
}

#adminmenu li.toplevel_page_wpglobus_options div.wp-menu-image:before {
  @include dashicon-globus();
}

.wpglobus-menu-item-box {
  background-color: #e0e0e0;
  padding-bottom: 20px;
}

.wpglobus-excerpt {
  width: 98%;
  height: 4em;
}

.widefat thead tr th.column-wpglobus_languages {
  width: 7%;
}

//noinspection CssNoGenericFontName
@mixin dashicon() {
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  font-family: dashicons;
  font-weight: 400;
  font-style: normal;
  text-decoration: inherit;
}

.wpglobus-switch .wpglobus-icon-globe:before {
  @include dashicon();
  @include dashicon-globus();
  font-size: 20px;
  vertical-align: text-bottom;
  opacity: 0.6;
}

ul.wpglobus-checkmarks {
  li:before {
    @include dashicon();
    @include dashicon-checkmark();
    font-size: 2em;
    vertical-align: top;
    color: forestgreen;
  }

  li {
    text-indent: -1em;
    margin-left: 1.5em;
  }
}

ul.wpglobus-important {
  li:before {
    @include dashicon();
    @include dashicon-triangle-right();
    font-size: 23px;
    vertical-align: top;
    color: darkred;
  }

  li {
    text-indent: -14px;
    margin-left: 24px;
  }
}

.wpglobus-state-error {
  border: 1px solid #f00 !important;
}

.wpglobus-post-status-info {
  width: 100%;
  border-spacing: 0;
  border: 1px solid #e5e5e5;
  border-top: none;
  background-color: #f7f7f7;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  z-index: 999;

  td {
    font-size: 12px;
  }

  .wpglobus-wp-word-count {
    display: block;
    padding: 2px 10px;
  }
}

.wpglobus-wp-admin {
  .wpglobus-translatable {
    border-left: 3px solid blue !important;
  }

  .wpglobus-link-lock-icon {
    cursor: not-allowed;
  }

  .wpglobus-link-trash-icon {
    cursor: not-allowed;
  }

  .wpglobus-link-lock-icon:before {
    font-family: dashicons;
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    content: unicode("f160");
    font-size: 11px;
  }

  .wpglobus-link-open-icon:before {
    font-family: dashicons;
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    content: unicode("f504");
    font-size: 11px;
  }

  .wpglobus-link-trash-icon:before {
    font-family: dashicons;
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    content: unicode("f182");
    font-size: 11px;
  }

  .wpglobus-spinner {
    background: url(images/spinner.gif) no-repeat;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px;
    display: inline-block;
    visibility: hidden;
    float: right;
    vertical-align: middle;
    opacity: 0.7;
    filter: alpha(opacity=70);
    width: 20px;
    height: 20px;
    margin: 0;
  }

}

/* @see #edit-slug-box  */
.wpglobus-edit-slug-box {
  line-height: 24px;
  min-height: 25px;
  margin-top: 5px;
  padding: 0 10px;
  color: #666;

  .wpglobus-editable-post-name {
    background-color: #fffbcc;
  }

  .wpglobus-editable-post-name-full {
    display: none;
  }

  /* @see #editable-post-name input */
  .wpglobus-editable-post-name input {
    font-size: 13px;
    height: 22px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    width: 20em;
  }

}

$color-wpglobus-logo-globe: #E38869;
$color-wpglobus-logo-wp: #23769C;

// @since 1.5.8 Use our styles only with our `wrap` class.
.about-wrap.wpglobus-about-wrap {
  .wpglobus-version {
    color: $color-wpglobus-logo-globe;
    font-size: 95%;
  }

  .wpglobus-motto {
    font-style: italic;
  }

  .wpglobus-wp {
    color: $color-wpglobus-logo-wp;
  }

  h1.wpglobus {
    font-family: Georgia, serif;
    font-variant: small-caps;
    letter-spacing: 1.5px;
  }

  .wpglobus-stars {
    color: $color-wpglobus-logo-globe;
  }

  // The `Customizr` theme breaks this by setting to "center".
  // @since 1.5.8
  .feature-section {
    div {
      text-align: left;
    }
  }

  // @since 1.9.24 Display notices in our `.about-wrap`.
  .notice {
    display: block !important;
    margin-right: 140px;
  }

  // @since 1.9.30 Vertical align icons in admin tabs.
  .nav-tab {
    .dashicons, .dashicons-before {
      vertical-align: middle;
    }
  }
}

// Hide Redux annoyances
.toplevel_page_wpglobus_options {
  #redux-header, .redux-timer {
    display: none;
  }
}

// Use Dashicon instead of Elusive, because Elusive can be broken by a theme (ex. "Virtue")
$color-wpglobus-icon-sortable: #2866a0;
.toplevel_page_wpglobus_options {
  .el-move::before {
    @include dashicon();
    @include dashicons-move();
    border: 1px solid $color-wpglobus-icon-sortable;
    color: $color-wpglobus-icon-sortable;
    background-color: white;
    margin: 0 3px 0 3px;
    line-height: 1.2;
    width: 1.5em;
    text-align: center;
    cursor: move;
  }
}

// Options panel header
// @see includes/options/wpglobus-options-header.php
$bg-redux-info: #d3e4f4;
.redux-container #redux-intro-text {
  background-color: $bg-redux-info;
  color: black;

  h1 {
    color: color.adjust($bg-redux-info, $lightness: -50%);
    float: left;
    width: 204px;
    margin: 0;
    padding: 0;
  }

  .wpg-bnr {
    width: 400px;

    &.wpg-bnr-left {
      float: left;
    }

    &.wpg-bnr-right {
      float: right;
    }
  }

  .wpg-a-img {
    float: left;
    display: block;
    height: 100px;
    border: 1px solid color.adjust($bg-redux-info, $lightness: -30%);
    background-color: white;
    margin-right: 1em;

    img {
      width: 100px;
    }
  }

  .wpg-text-block {
    padding-top: 0.3em;

    .wpg-title {
      font-weight: 700;
    }

    .wpg-body {
      margin: 0.3em 0;
    }

    .wpg-footer {
      font-style: italic;
    }
  }

}

// @see customize.php
.customize-controls-close.wpglobus-customize-selector:before {
  content: "";
}

.customize-controls-close.wpglobus-customize-selector .wpglobus-icon-globe:before {
  color: #00f;
  display: inline-block;
  font-family: dashicons;
  content: unicode("f319");
  font-size: 20px;
}

.wpglobus-customize-translatable-element, .wpglobus-customize-control, .wpglobus-customize-widget-control {
  border-left: 3px solid blue !important;
}

@media screen and (max-width: 640px) {
  .customize-controls-preview-toggle {
    left: 88px;
  }
}

// Fix Yoast help buttons. Because we wrap Yoast in jQ-UI tabs,
// the style might be broken. Specifically, the "Types" plugin breaks it.
.yoast_help.yoast-help-button.dashicons {
  font-family: dashicons !important;
  font-size: 20px !important;
}

// To highlight texts in admin area.
.wpglobus-mark {
  font-weight: 700;

  &.wpglobus-warning {
    background-color: yellow;
    color: black;
  }
}

// To display admin language selector on narrow screens.
@media screen and (max-width: 782px) {
  #wpadminbar li#wp-admin-bar-wpglobus-language-select {
    display: block;

    .ab-icon {
      margin-top: -3px;

      img {
        height: 25px;
      }
    }
  }
}

.wp-ui-notification a {
  color: white;
}
.wp-ui-notification code {
  background-color: silver;
  color: black;
}
