/**
 * WP Statistics Setting Admin page
 */

.wps-wrap.wp-statistics-settings {
  .widefat {
    float: left;
  }

  .note {
    color: #ff0000;
    font-size: 11px !important;
    font-weight: bold;
  }

  .postbox-container {
    margin-top: 51px;

    .postbox {
      padding: 12px !important;
    }
  }

  ul.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  ul.tabs li {
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 8px;
    cursor: pointer;
    border: 1px solid #f1f1f1;
    margin: 0;
  }

  ul.tabs li.current {
    background: #ffffff;
    color: #222;
    border-right-color: #e5e5e5;
    border-left-color: #e5e5e5;
    border-bottom-color: #ffffff;
    border-top-color: #e5e5e5;
    padding-bottom: 11px;
  }

  .tab-content {
    display: none;
    margin: -1px 0 0 0;
  }

  .tab-content.current {
    display: inherit;
  }

  #update_geoip {
    font-size: 12px;
    margin: 0 5px;
    padding: 5px 15px;
    transform: translateY(-3px);
  }

  .geoip-update-loading {
    transform: translateY(3px);
    margin-left: 10px;
    display: inline;
  }

  .update_geoip_result {
    display: block;
    border-radius: 2px;
    background-color: #f2bb08;
    padding: 8px;
    margin-top: 10px;
    transition: 0.3s all ease-out;
    font-size: 12px;
    color: #222;
  }

  .wps-settingsPageFlex,
  .wps-optimizationPageFlex {
    display: flex;
    justify-content: space-between;
    align-items: start;

    .wps-optionsMenu {
      display: block;
      padding: 8px 0;
      flex: 0 0 20%;
      background-color: white;
      border-radius: 8px;

      a.wps-optionsMenuItem {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 15px;
        padding-left: 12px;
        border-left: 3px solid white;
        transition: .3s all ease-out;
        cursor: pointer;

        svg {
          fill: #56585A;
          width: 18px;
          height: auto;
          margin-right: 7px;
          transition: .3s all ease-out;
        }

        span {
          font-size: 15px;
          color: #56585A;
          font-weight: 500;
          transition: .3s all ease-out;
        }

        &.current,
        &:hover {
          background-color: #F0F5FF;
          border-left: 3px solid #404BF2;

          span {
            color: #404BF2;
          }

          svg {
            fill: #404BF2;
          }
        }
      }

      .wps-optionsMenuItem__title {
        margin: 25px 15px 8px;
        color: #404BF2;
        padding-bottom: 7px;
        border-bottom: 2px solid #404BF2;
        font-size: 16px;
        font-weight: 600;
      }

      .wps-optionsMenuItem__extention {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 15px;
        cursor: pointer;

        .wps-optionsMenuItem__extentionTitle {
          font-size: 15px;
          color: #A3A5B1;
          font-weight: 400;
          transition: .3s all ease-out;
        }

        .wps-optionsMenuItem__extentionStatus {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 4px 6px;
          border-radius: 4px;
          background-color: #F0F5FF;
          color: #56585A;
          font-size: 12px;
          white-space: nowrap;

          &:before {
            content: '';
            display: block;
            width: 12px;
            height: 12px;
            margin-right: 5px;
            background: url("../images/preview-lock.png") right center/auto 100% no-repeat;
          }
        }

        &:hover {
          .wps-optionsMenuItem__extentionTitle {
            color: #404BF2;
          }
        }
      }
    }

    .wps-settingsBox,
    .wps-optimizationBox,
    {
      flex: 0 0 78%;

      #wp-statistics-settings-form {
        .wp-statistics-container {

          .form-table {
            h3 {
              margin: 5px 0;
              font-size: 18px;
            }
          }
        }
      }
    }

    @media (max-width: 782px) {
      .wps-settingsBox,
      .wps-optimizationBox {
        .form-table {
          tr {
            td {
              padding: 15px;
            }
          }
        }
      }
    }

    @media (max-width: 1100px) and (min-width: 850px) {
      .wps-settingsBox,
      .wps-optimizationBox {
        flex: 0 0 74%;
      }
    }

    @media (max-width: 850px) and (min-width: 600px) {
      .wps-settingsBox,
      .wps-optimizationBox {
        flex: 0 0 64%;
      }

      .wps-optionsMenu {
        flex: 0 0 30%;
      }
    }

    @media (max-width: 600px) {
      .wps-settingsBox,
      .wps-optimizationBox {
        flex: 0 0 100%;
      }

      .wps-optionsMenu {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        border-radius: 0;
        max-height: 72vh;
        overflow-y: scroll;
        box-shadow: 0 -2px 25px rgba(black, .1);
      }
    }
  }
}

/** WP Statistics Media Query Setting Admin page **/
@media only screen and (max-width: 1327px) {
  .wp-statistics-settings ul.tabs li {
    padding: 10px 5px;
  }
}