/*
 * Adjustme admin frontend CSS.
 * This will only load for admins on the frontend
 */

@import '../../../variables';

body{

  /* Event classes */
  &.adjustme_active{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    textarea{
      -webkit-user-select: initial;
      -khtml-user-select: initial;
      -moz-user-select: initial;
      -o-user-select: initial;
      user-select: initial;
    }
  }
  &.adjustme_pin_active{
    *{
      cursor:crosshair!important;
    }
    #adjustme_app *{
      cursor:unset!important;
    }
  }
  /* Event classes END */

  /* WP admin bar */
  #wpadminbar #wp-toolbar #wp-admin-bar-adjustme{



    .ab-icon:before{
      content: "\f108";
      top: 3px;
      color:$green;
    }
    span.ab-label{
      color:$green;
    }

    &:hover{
      span.ab-label{
        color:$green;
      }
    }



  }
  /* WP admin bar END */

  /* App */
  &.adjustme_active{
    #adjustme_app{
      #adjustme_toolbar{
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);

      }
      #adjustme_list{
        visibility: visible;
        top:0;
        left:0;
        opacity:1;
      }
    }
  }
  #adjustme_app{
    position: absolute;
    z-index: 2147483647;
    left: 0;
    top: 0;

    *{
      -webkit-transition: all 0.3s ease-in-out, top 0ms, left 0ms, visibility 0ms;
      -moz-transition: all 0.3s ease-in-out, top 0ms, left 0ms, visibility 0ms;
      -o-transition: all 0.3s ease-in-out, 0ms, top 0ms, left 0ms, visibility 0ms;
      transition: all 0.3s ease-in-out, top 0ms, left 0ms, visibility 0ms;
    }

    ul{
      margin:0;
    }
    li{
      list-style: none;
    }

    /* Toolbar */
    #adjustme_toolbar{
      direction: ltr;
      cursor:default!important;
      color: $white-grey;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
      height: 32px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: $darkgrey;
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);

      ul{
        background: rgba($darkgrey, 0.9);

        li.adjustme_menu{
          display:inline-block;
          vertical-align: top;

          .adjustme_pointer{
            padding: 0 15px;
            height: 32px;
            display: block;
          }
          .ab-icon{
            vertical-align: middle;
            display: inline-block;
            position: relative;
            font: 400 20px/1 dashicons;
            speak: none;
            padding: 6px 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            &:before{
              position: relative;
            }
          }

          .ab-label{
            vertical-align: middle;
            display: inline-block;
            font-size: 13px;
            font-weight: 400;
            line-height: 32px;
          }

          &#adjustme_toolbar_add{
            color:$green;
            *{
              -webkit-transition: all 0.1s ease-in-out;
              -moz-transition: all 0.1s ease-in-out;
              -o-transition: all 0.1s ease-in-out;
              transition: all 0.1s ease-in-out;
            }
            .ab-icon{
              &:before{
                top: 2px;
                content: "\f132";
              }
            }
            &.adjustme_active{
              color:rgba($white-grey, 0.5);
              background: rgba(255,255,255,0.05);
              &:after{
                content: 'Click anywhere to make a pin';
                position: absolute;
                background: $darkgrey;
                color:rgba($white-grey, 0.5);
                font-size: 8px;
                padding: 2px 5px;
                margin:2px;
                border-radius: 10px;
              }
            }
          }
          &#adjustme_toolbar_save{
            .ab-icon{
              &:before{
                content: "\f480";
              }
            }
          }
          &#adjustme_toolbar_send{
            .ab-icon{
              &:before{
                content: "\f310";
              }
            }
          }

          &:hover{
            background: rgba(255,255,255,0.05);
          }
        }
      }

      #adjustme_loading{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 8px;
        color:$white;
      }

      #adjustme_toolbar_deactivation{
        position: absolute;
        top: 0;
        right: 0;
        line-height: 32px;
        height: 32px;
        width: 32px;
        &:hover{
          background: rgba(255,255,255,0.05);
        }
      }

    }
    /* Toolbar END */

    /* List */
    #adjustme_list{
      visibility: hidden;
      top: -9999px;
      left: -9999px;
      opacity:0;
    }

    .adjustme_pointer{
      cursor:pointer!important;
    }

    .adjustme_request{
      position: absolute;
      top: -9999px;
      left: -9999px;
      z-index: 2147483647;
      max-height:25px;
      max-width:50px;
      overflow:hidden;
      border-radius:25px;
      cursor:pointer;
      transform: translateX(-50%);

      &.adjustme_focus{
        max-height:85px;
        max-width:200px;
        border-radius:0px;

        .adjustme_request_bar {
          cursor: move !important;
        }

      }

      .adjustme_request_bar{
        background:$darkgrey;
        position:relative;
        width:100%;
        min-width:200px;
        height:25px;

        .adjustme_request_bar_move{
          width:100%;
          height:100%;
        }
        .adjustme_request_minimize{
          position: absolute;
          right: 20px;
          top: 0;
          z-index:1337;
          height:25px;
          width:15px;
          font-size: 15px;
          line-height:25px;
          text-align: center;
          color: $white-grey;
          display: block;
          cursor: pointer!important;

          &:hover{
            background: rgba(255,255,255,0.05);
          }
        }
        .adjustme_request_remove{
          position: absolute;
          right: 0;
          top: 0;
          z-index:1337;
          height:25px;
          width:15px;
          padding-right:5px;
          box-sizing:content-box;
          font-size: 15px;
          line-height:25px;
          text-align: center;
          color: $white-grey;
          display: block;
          cursor: pointer!important;

          &:before{
            vertical-align: top;
          }

          &:hover{
            background: rgba(255,255,255,0.05);
          }
        }
      }

      textarea{
        min-height: 60px;
        min-width: 200px;
        font-size: 10px;
        padding: 8px;
        border: 0;
        border-radius: 0;
        background: rgba(35, 40, 45, 0.8);
        color: $white-grey;
        text-align: center;
        box-sizing: border-box;
        cursor:text!important;
        resize:none;

        &:focus{
          outline:none;


        }

        &::-webkit-input-placeholder {
          color: rgba($white-grey, 0.5);
        }
        &:-moz-placeholder {
          color: rgba($white-grey, 0.5);
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: rgba($white-grey, 0.5);
        }
        :-ms-input-placeholder { /* Internet Explorer 10-11 */
          color: rgba($white-grey, 0.5);
        }
        ::-ms-input-placeholder { /* Microsoft Edge */
          color: rgba($white-grey, 0.5);
        }
      }
    }
    /* List END */

    /* Notification */
    #adjustme_notification{
      margin-top:-300px;
      position: fixed;
      left: 50%;
      top: 42px;
      transform: translateX(-50%);
      padding: 20px 50px;
      background: $darkgrey;
      color: $white-grey;
      font-size:12px;
      &.error{
        margin-top: 0;
        border-top: 5px solid $red;
      }
      &.message{
        margin-top: 0;
        border-top: 5px solid $green;
      }

    }
    /* Notification END*/

  }
  /* App END */


}