$prefix: snd;

/* general styles */

.#{$prefix}_info {
  color: #888;
  font-size: 13px;
  font-style: italic;
}

div.#{$prefix}_info {
  margin-top: 7px;
  word-break: break-all;
}

.#{$prefix}_info_small {
  font-size: 11px !important;
}

body:not(.rtl) div.updated.#{$prefix}-notice {
  border-left: 4px solid #ffba00;
}

.rtl div.updated.#{$prefix}-notice {
  border-right: 4px solid #ffba00;
}

.#{$prefix}_table_bg {
  background: #f5e177;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.#{$prefix}_network_apply_all {
  padding-left: 15px;
}

/* display code */

span.#{$prefix}_code {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
  font-size: 13px;
  margin: 0 1px;
  padding: 3px 5px 2px;
}

/*
* styles help tooltips
*/

.#{$prefix}_help_box {
  background-image: url("../images/tooltip_icons.png");
  background-repeat: no-repeat;
  cursor: pointer;
  height: 28px;
  position: relative;
  margin: 3px 5px;
  width: 28px;
  display: inline-block;

  &:not(.dashicons) {
    vertical-align: middle;
  }

  &.dashicons-editor-help {
    background: none;
    color: #0074a2;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: 2;
    min-width: auto;
    float: none;
  }
}

.setting span .#{$prefix}_help_box.dashicons-editor-help {
  background: none;
  color: #0074a2;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0;
  z-index: 2;
  min-width: auto;
  float: none;
}

.#{$prefix}_help_box.dashicons-editor-help:hover {
  color: #2ea2cc;
}

.#{$prefix}_hidden_help_text {
  display: none;
}

.#{$prefix}-tooltip-content {
  font-size: 11px;
  color: #fff;
  text-shadow: 0 0 2px #000;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(25, 25, 25, 0.92);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: 0 0 3px #555;
  -webkit-box-shadow: 0 0 3px #555;
  -moz-box-shadow: 0 0 3px #555;

  a {
    color: #00a0d2;
  }
}

/*
* #{$prefix} shortcode insert
*/

.mce-toolbar .mce-btn-group .mce-btn.mce-#{$prefix}_shortcode_button {
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

##{$prefix}_shortcode_content, ##{$prefix}_shortcode_select_plugin {
  margin-bottom: 10px;
}

##{$prefix}_shortcode_content * {
  white-space: normal;
}

##{$prefix}_shortcode_popup_block h4 {
  padding: 0;
  line-height: 2.5;
  text-transform: uppercase;
}

##{$prefix}_shortcode_content_bottom p {
  font-style: italic;
  color: #666;
}

##{$prefix}_shortcode_block {
  background-color: #fdfdfd;
  border: 1px solid #dfdfdf;
  overflow: auto;
  padding: 10px;
}

##{$prefix}_shortcode_display {
  margin: 0 auto;
}

##{$prefix}_shortcode_content {
  fieldset label {
    margin-top: 5px;
    display: inline-block;
  }

  .title {
    margin-right: 5px;
    margin-left: 5px;
    line-height: 2.5;
    white-space: normal;
  }

  .checkbox-title {
    white-space: normal;
  }
}

/*
* styles for notices (license has expired, Illegal use notification ond other) on the /plugins.php page
*/

.#{$prefix}-plugin-update-tr .update-message {
  margin-top: 0 !important;

  :before {
    content: '';
  }
}

/*
* #{$prefix}_Settings_Tabs
*/

.#{$prefix}_form #postbox-container-2 > div {
  width: calc( 100% - 162px );
  margin-left: 160px;

  &.submit {
    margin-bottom: 20px;
    padding: 0;
  }
}

##{$prefix}_settings_tabs_wrapper {
  position: relative;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  border: none;
  padding: 0;
  background: none;
  font-family: inherit;
}

##{$prefix}_settings_tabs {
  z-index: 2;
  position: relative;
  width: 159px;
  float: left;
  background: #f5f5f5;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-right: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  line-height: inherit;

  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none;
  }

  li {
    margin: 0;
    padding: 0;
    float: none;
    background: none;
    white-space: normal;

    a {
      display: block;
      margin: 0 20px;
      padding: 20px 0 20px 25px;
      text-decoration: none;
      color: #666;
      border-bottom: 1px solid #ddd;
      word-break: break-word;
      box-shadow: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      transition: none;
      -webkit-transition: none;
      float: none;
    }

    &.ui-tabs-active {
      width: 161px;

      a {
        width: 161px;
        margin: -1px 0 0 0;
        border-top: 1px solid #ddd;
        padding: 20px 21px 20px 45px;
        color: #000 !important;
        background: #fff !important;
      }
    }

    a {
      &:hover {
        width: 161px;
        margin: -1px 0 0 0;
        border-top: 1px solid #ddd;
        padding: 20px 21px 20px 45px;
        color: #000 !important;
        background: #fff !important;
      }

      &:before {
        content: "\f111";
        font-family: 'dashicons';
        font-size: 20px;
        position: absolute;
        left: 20px;
      }
    }

    &.#{$prefix}-tab-display a:before {
      content: "\f163";
    }

    &.#{$prefix}-tab-attemptsSettings a:before {
      content: "\f107";
    }

    &.#{$prefix}-tab-2faSettings a:before {
      content: "\f448";
    }

    &.#{$prefix}-tab-Remember_Me a:before {
      content: "\f526";
    }

    &.#{$prefix}-tab-xmlrpc a:before {
      content: "\f146";
    }

    &.#{$prefix}-tab-custom_code a:before {
      font-family: '#{$prefix}icons';
      content: "\e93a";
    }

    &.#{$prefix}-tab-license a:before {
      content: "\f112";
    }

    &.#{$prefix}-tab-images a:before {
      content: "\f128";
    }

    &.#{$prefix}-tab-cover a:before {
      content: "\f318";
    }

    &.#{$prefix}-tab-lightbox a:before {
      content: "\f211";
    }

    &.#{$prefix}-tab-social a:before {
      content: "\f237";
    }

    &.#{$prefix}-tab-import-export a:before {
      content: "\f317";
    }

    &.#{$prefix}-tab-errors a:before, &.#{$prefix}-tab-messages a:before {
      font-family: '#{$prefix}icons';
      content: "\e93d";
      font-size: 18px;
      left: 21px;
    }

    &.#{$prefix}-tab-notifications a:before {
      content: "\f466";
    }

    &.#{$prefix}-tab-reports a:before {
      content: "\f535";
    }

    &.#{$prefix}-tab-output a:before {
      content: "\f498";
    }

    &:last-child a {
      border-bottom: none;
    }
  }
}

/* custom tabs */

##{$prefix}_settings_tabs_wrapper .#{$prefix}_tab {
  position: relative;
  padding: 5px 10px 15px;
  width: calc( 100% - 183px );
  float: right;
  border: 1px solid #ddd;
  background: #fff;
  color: #444;
}

.#{$prefix}_tab {
  a {
    color: #0073aa;

    &:hover {
      color: #00a0d2;
    }
  }

  input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
  }
}

##{$prefix}_settings_tabs_wrapper .#{$prefix}_tab {
  > *:not(.#{$prefix}_pro_version_bloc):not(.#{$prefix}_tab_sub_label):not(hr):not(.inline) {
    margin-left: 10px;
    margin-right: 10px;
    width: calc( 100% - 20px );
  }

  button {
    white-space: normal;
    height: auto;
  }

  input {
    &[type="submit"], &[type="button"] {
      white-space: normal;
      height: auto;
    }
  }
}

.#{$prefix}_form .postbox .handle {
  cursor: inherit;
}

#poststuff h3.#{$prefix}_tab_label {
  margin-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
}

.#{$prefix}_tab_sub_label {
  font-weight: bold;
  background-color: #f1f1f1;
  padding: 7px 10px;
  margin-top: 10px;
  font-size: 15px;
}

.#{$prefix}_tab .form-table textarea {
  width: 100%;
}

#poststuff h3.#{$prefix}_tab_label + hr {
  margin-top: 18px;
}

.#{$prefix}_tab_description + hr {
  margin-top: 15px;
}

.rtl {
  ##{$prefix}_settings_tabs {
    float: right;
    border-right: 1px solid #ddd;
    border-left: none;

    li {
      a {
        padding: 20px 25px 20px 0;
      }

      &.ui-tabs-active a {
        padding: 20px 45px 20px 20px;
      }

      a {
        &:hover {
          padding: 20px 45px 20px 20px;
        }

        &:before {
          right: 20px;
        }
      }
    }
  }

  .#{$prefix}_form #postbox-container-2 > div {
    margin-right: 160px;
    margin-left: 0;
  }
}

.#{$prefix}_margined_box {
  margin: 1em 0;
}

@media only screen and (max-width: 1100px) {
  ##{$prefix}_settings_tabs {
    width: 59px;

    li {
      a {
        margin: 0;
        padding: 20px 0;
        width: 60px;
        height: 60px;
      }

      &.ui-tabs-active a, a:hover {
        padding: 20px 0;
        height: 61px;
      }
    }
  }

  .rtl ##{$prefix}_settings_tabs li {
    &.ui-tabs-active a, a:hover {
      padding: 20px 0;
      height: 61px;
    }
  }

  ##{$prefix}_settings_tabs li {
    &.ui-tabs-active {
      width: 61px;

      a {
        width: 61px;
      }
    }

    a:hover {
      width: 61px;
    }
  }

  ##{$prefix}_settings_tabs_wrapper .#{$prefix}_tab {
    width: calc( 100% - 83px );
  }

  ##{$prefix}_settings_tabs span {
    display: none;
  }

  .#{$prefix}_form #postbox-container-2 > div {
    margin-left: 60px;
    width: calc( 100% - 62px );
  }

  .rtl .#{$prefix}_form #postbox-container-2 > div {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media only screen and (max-width: 850px) {
  .#{$prefix}_form #postbox-container-2 > div, .rtl .#{$prefix}_form #postbox-container-2 > div {
    width: calc( 100% - 2px );
    margin: 0;
  }

  .#{$prefix}_form {
    #postbox-container-2 .postbox {
      margin-bottom: 20px;
    }

    .postbox-container div.submit {
      display: none;
    }
  }
}

@media screen and (max-width: 782px) {
  .#{$prefix}-hide-for-mobile {
    display: none;
  }
}

@media screen and (max-width: 440px) {
  ##{$prefix}_settings_tabs_wrapper .#{$prefix}_tab .form-table td {
    input {
      &[type=file] {
        width: 182px;
      }

      &[type=text]:not(.small-text), &[type=password], &[type=search], &[type=number]:not(.small-text) {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
      }
    }

    select, textarea {
      width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  }
}