/**
 * Styles for the Widget to be displayed in the Clearfy plugin

 * @author Alex Kovalev <alex.kovalevv@gmail.com> 
 * @copyright Webcraftic 14.06.2019
 */

@positiveColor: #8CC152;
@negativeColor: #D2D3D6;
@neutralColor: #828282;

@errorColor: #fb5d49;
@waringColor: #ffb635;

@greyButtonBg: #f3f3f3;
@greyButtonColor: #656565;

@greenButtonBg: #c9deb2;
@greenButtonColor: #586549;

@orangeButtonBg: #fdd599;
@orangeButtonColor: #a57b3c;


.premium-label(@position: relative, @positionTop:-8px, @positionLeft:-10px, @positionRight:auto) {
  display: inline-block;
  position: @position;
  content: 'PRO';
  background: #ff5722;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-style: normal;
  padding: 4px 6px;
  margin-left: 4px;
  vertical-align: top;
  top: @positionTop;
  left: @positionLeft;
  right: @positionRight;
  z-index: 11;
}

.wio-clear {
  clear: both;
}

// Fix for Clearfy
// This code hides tabs custom folders and nextgen gallery
// -----------------------------------------------
#io_folders_statistic-wbcr_clearfy-tab, #io_nextgen_gallery_statistic-wbcr_clearfy-tab {
  display: none !important;
}

// Styling tabs on statistics pages
// -----------------------------------------------
.wrio-statistic-nav {
  margin: 0;
  //box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  background: #efefef;

  ul {
    margin: 0;

    li {
      position: relative;
      display: inline-block;
      //width: 300px;
      margin: 0 0 0 0;
      background: #ffffff;
      box-shadow: 0 -2px 0 #eaeaea;

      &:hover {
        background: #f7f7f7;
      }

      &.active {
        //box-shadow: 0 -2px 0 #c9deb2;
        background: #f7f7f7;
        border-top: 1px solid #d4d4d4;
        border-left: 1px solid #d4d4d4;
        border-right: 1px solid #d4d4d4;
        border-bottom: 1px solid #f7f7f7;
        margin-bottom: -1px;

        a {
          color: #222;

          .wrio-statistic-tab-percent {
            border: 2px dashed #8bc34a;
            color: #5e8237;
          }
        }

        .dashicons, .dashicons-before:before {
          color: #ff8b66;
        }
      }

      .wrio-statistic-tab {
        display: block;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
        color: #d4d4d4;
        font-size: 22px;
        line-height: 2;

        &:active, &:focus {
          background: 0;
          box-shadow: none;
          outline: none;
        }

        .dashicons, .dashicons-before:before {
          display: inline-block;
          width: 30px;
          height: 30px;
          font-size: 30px;
          line-height: 1.5;
          margin-right: 15px;
          color: #d4d4d4;
        }


        .wrio-statistic-tab-percent {
          display: inline-block;
          width: 42px;
          height: 42px;
          border-radius: 100px;
          border: 2px dashed #e4e4e4;
          padding: 5px;
          margin-left: 30px;
          font-size: 14px;
          font-weight: 600;
          text-align: center;
          color: #bdbdbd;
        }
      }

      .wrio-statistic-tab-premium-label:after {
        .premium-label(absolute, 10px, auto, 10px);
      }
    }
  }
}

// Table style. The table is used for optimization log
.wrio-table {
  width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
  border-spacing: 3px;
  background: #fff;
  border-top: 2px dashed #cac9c9;

  th, td {
    padding: 16px 10px;
    text-align: center;
  }

  th {
    background: #f3f3f3;
    color: #777777;
    box-shadow: 0 1px 0 rgb(216, 216, 216);

    &:nth-child(2n+1) {
      background: #f9f9f9
    }
  }

  tr.wrio-error {
    background-color: #ffe9e9 !important;
  }

  .wrio-table-spinner {
    background: url("../img/quick-start-loader.gif") center center no-repeat;
  }

  .wrio-table-highlighter {
    display: inline-block;
    padding: 3px 7px;
    background: @greyButtonBg;
  }

  .wbcr-rio-server-success {
    color: @positiveColor;
  }

  .wbcr-rio-server-error {
    color: @errorColor;
  }

  .wbcr-rio-server-warning {
    color: @waringColor;
  }

  &.wbcr-rio-folders-table {
    td:nth-child(3) {
      text-align: left;
    }
  }
}

.wrio-servers {
  padding: 40px 20px;

  label {
    span {
      display: block;
      font-weight: normal;
      font-size: 12px;
      color: #b7b2b2;
    }
  }

  #wrio-change-optimization-server {
    position: relative;
    display: inline-block;
    max-width: 400px;
    margin-right: 15px;
    margin-bottom: 0;
    border: 1px solid #d2d0d0;
    background: #efefef;
  }

  .wrio-servers-info {
    margin: 0 0 0;
    padding: 20px;
    background: #fff;
  }

  .wrio-server-status-wrap {
    display: inline-block;
    margin-top: 8px;

    .wrio-server-status {
      background: transparent;
      color: #fff;
      padding: 3px 5px;
      border-radius: 4px;

      &.wrio-down {
        background: #ff5722;
      }

      &.wrio-stable {
        background: #8bc34a;
      }

      &.wrio-server-check-proccess {
        display: inline-block;
        height: 10px;
        width: 30px;
        background: url("../img/quick-start-loader.gif") center no-repeat;
      }
    }
  }


  .wrio-premium-user-balance-wrap {
    display: inline-block;
    margin-top: 8px;
    margin-left: 10px;

    .wrio-premium-user-balance {
      color: #fff;
      padding: 3px 5px;
      border-radius: 4px;
      background: #ffc107;
    }

    .wrio-premium-user-balance-check-proccess {
      display: inline-block;
      height: 10px;
      width: 30px;
      background: url("../img/quick-start-loader.gif") center no-repeat;
    }
  }
}

.wio-columns {
  overflow: hidden;
  padding: 15px 0;
  counter-reset: cols;

  [class^="col-"] {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .col-1-3 {
    width: 33.333%;
    padding-left: 28px;
  }

  .col-2-3 {
    width: 66.666%;
    padding-left: 28px
  }

  .col-1-2 {
    width: 50%;
    padding: 0 20px;
  }

  .col-statistics.col-statistics {
    width: 60%;
  }

  .col-chart.col-chart {
    width: 40%;
    position: relative;
    padding: 20px;
    font-size: 12px;
    text-transform: uppercase;
    background: #f1f1f1b3;
    color: #abacaf;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 10px;
    text-align: left;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }
}

.wio-col {
  float: left;
  width: 50%;
  box-sizing: border-box;
  -webkit-flex-basis: 50%;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
}

.wio-col {
  padding-right: 20px;
}

.wio-col + .wio-col {
  padding-right: 0;
  padding-left: 50px;
}

.wio-col:target {
  animation: wiohello 1s 3 linear backwards;
}

.wio-number-you-optimized {
  margin-bottom: 1.35em;
  overflow: hidden;

  #wio-total-optimized-attachments-pct {
    color: @neutralColor;
  }

  .wio-number {
    display: table-cell;
    padding-right: 15px;
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    color: @neutralColor;
  }

  .wio-text {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    font-size: 12px;
    color: @neutralColor;
  }

  & > p {
    display: table;
  }
}

.wio-bars {
  padding-right: 15px;
}

.wio-bars p {
  font-size: 12px;
  margin-bottom: 5px;
}

.wio-bars + .wio-number-you-optimized {
  border-bottom: 0;
  padding-top: 0.85em;
}

.wio-bars + .wio-number-you-optimized p {
  color: darken(@positiveColor, 10);
}

.wio-bar-negative {
  .wio-progress {
    background: @negativeColor;
  }

  .wio-barnb {
    color: darken(@negativeColor, 20);
  }
}

.wio-progress {
  height: 8px;
  transition: width .3s;

  /*.wio-bar-negative {
    width: 92% !important;
  }*/
}

.wio-bar-positive {
  .wio-progress {
    background: @positiveColor;
  }

  .wio-barnb {
    color: darken(@positiveColor, 10);
  }
}

.wio-bar-primary {
  .wio-progress {
    background: @positiveColor;
  }

  .wio-barnb {
    color: darken(@positiveColor, 10);
  }
}

.wio-right-outside-number .wio-barnb {
  display: block;
  margin-right: -5.25em;
  text-align: right;
  font-weight: bold;
  line-height: .8;
}

/* Doughnut */

.wio-chart {
  position: relative;
  top: 1px;
  display: inline-block;
  vertical-align: middle;
}

.wio-chart-container {
  position: relative;
  display: inline-block;
  margin-right: 5px;
}

.wio-chart-container canvas {
  display: block;
}

.wio-overview-chart-container {
  float: left;
  margin-right: 20px;
}

.wio-chart-percent {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -.5em;
  line-height: 0.8;
  text-align: center;
  font-size: 54px;
  font-weight: bold;
  color: #afafaf;
}

.wio-chart-percent span {
  font-size: 20px;
  vertical-align: super;
}

#wio-overview-chart-legend {
  overflow: hidden;
}

.wio-doughnut-legend li {
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
  border-radius: 5px;
  padding: 3px 8px 2px 31px;
  font-size: 9px;
  cursor: default;
  -webkit-transition: background-color 200ms ease-in-out;
  -moz-transition: background-color 200ms ease-in-out;
  -o-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}

.wio-doughnut-legend li span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.wio-optimize-button {
  min-width: 180px;
  padding: 12px 30px;
  background: @greenButtonBg;
  color: @greenButtonColor;
  border: 0;
  box-shadow: none;
  font-size: 14px;
  text-transform: uppercase !important;
  font-weight: bold;
  border-radius: 4px;
  outline: none;

  &:active {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
  }

  &:disabled {
    background: lighten(@greenButtonBg, 10%);
    color: lighten(@greenButtonColor, 30%);
  }

  &.wio-running {
    color: @orangeButtonColor;
    background: @orangeButtonBg url("../img/Spinner-1s-33px.gif") 10px center no-repeat;
    padding-left: 50px;
  }
}

.wio-global-optim-phrase {
  width: 180px;
  padding-top: 20px;
  font-size: 14px;
  text-align: center;
}

.wio-total-percent {
  color: darken(@positiveColor, 20);
}

#wio-start-msg-top, #wio-start-msg-right, #wio-start-msg-complete {
  display: none;
}

.wio-text-left {
  text-align: left;
}

span.wio-num {
  display: inline !important;
  position: inherit !important;
}


// WIDGETS SPACE
// -----------------------------------------------
.wio-image-optimize-board {
  padding-bottom: 0 !important;
}

.wio-page-statistic {
  padding-left: 40px;

  .wio-chart-percent {
    margin-top: -1.1em;
  }
}

.wrio-optimization-progress {
  //margin-top: 30px;
  background: none;
  padding: 0;

  h4 {
    font-size: 15px;
    font-weight: 700;
  }

  /*button {
    padding: 5px 10px;
    border: 0;
    font-size: 11px;
    text-transform: uppercase !important;
    font-weight: bold;
    border-radius: 4px;
    outline: none;
    background: @greyButtonBg;
    color: @greyButtonColor;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);

    &:active {
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    }

    &.wbcr-rio-loading {
      width: 56px;
      font-size: 0;
      background: @greyButtonBg url("../img/quick-start-loader.gif") center no-repeat;
    }

    &.wbcr-rio-selected {
      background: #f3efe2;
      color: #d8d8d8;

      &:active {
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }*/

  .wbcr-rio-warning-message {
    padding: 20px;
    background: #efefef;
    font-size: 15px;
    color: #b7b7b7;
    font-style: italic;
  }
}

.wio-widget {
  padding: 0 !important;

  .wio-chart-percent {
    font-size: 44px;
    line-height: 1;
  }

  .wio-bars {
    width: 60%;
    margin-left: 155px;
  }

  .col-chart.col-chart {
    width: 100%;
  }

  .col-controls {
    width: 45%;
    padding-left: 5px;
    padding-top: 110px
  }

  .wio-doughnut-legend {
    /*padding-top:30px;*/
    text-align: left;
  }

  .wio-widget-bottom {
    display: table;
    padding-top: 20px !important;
    width: 100%;
    text-align: right;
  }

  .wio-widget-bottom li {
    display: table-cell;
  }

  .wio-widget-bottom li:first-child {
    text-align: left;
  }
}

// FORMS SPACE
// -----------------------------------------------
.factory-checkbox {
  &.wrio-checkbox-premium-label:after {
    .premium-label();
  }
}

.factory-checkbox-disabled {
  input, button {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

#wrio-webp-options, #wrio-error-log-options {
  h3 {
    font-size: 14px;
    margin: 0 0 10px 0;
    font-weight: 600;
    color: #565656;
  }

  .wrio-webp-options-info {
    color: #8a8787;
    font-size: 12px;
  }

  ul {
    padding-left: 0;

    li {
      &:after {
        content: '';
        display: block;
        clear: both;;
      }

      label {
        font-weight: 600;
      }

      .wrio-webp-options-radio, .wrio-error-log-options-checkbox {
        display: block;
        float: left;
        margin-top: 2px;
        margin-right: 8px;

        &:focus {
          outline: none;
          box-shadow: none;
        }
      }

      .wrio-webp-options-info, .wrio-error-log-options-info {
        padding-left: 25px;
      }
    }
  }


}

// MEDIA SPACE
// -----------------------------------------------

@media (max-width: 830px) {
  .wio [class^="col-"] {
    float: none;
    margin-bottom: 1.5em;
  }

  .wio .col-1-3,
  .wio .col-1-2 {
    width: auto;
    padding: 0 28px;
    clear: both;
    padding-top: 1em;
  }
}

@keyframes wiohello {
  0%, 100% {
    background: #FFF;
  }
  50% {
    background: #F4F7F9;
  }
}

@media (max-width: 1520px) and (min-width: 1381px), (max-width: 1086px) {
  .wio-columns {
    .col-statistics.col-statistics, .col-chart.col-chart {
      width: 50%;
    }
  }

}

@media (max-width: 808px) {
  .wio-columns {
    .col-statistics.col-statistics, .col-chart.col-chart {
      width: auto;
      float: none;
      padding: 0;
    }

    .col-chart.col-chart {
      margin-top: 3em;
    }
  }
}

/*@media (max-width: 1380px) and (min-width: 1246px), (max-width: 380px) {
  .wio-overview-chart-container {
    float: none;
    margin-right: 0;
  }
}

@media (max-width: 1380px) and (min-width: 1246px), (max-width: 380px) {
  .wio-overview-chart-container {
    float: none;
    margin-right: 0;
  }

  .wio-doughnut-legend {
    margin-top: 18px;
  }

  .wio-global-optim-phrase {
    padding-top: 0;
    width: auto;
  }
}*/