/**
 * Copyright (c) 2015 Institut National de l'Audiovisuel, INA
 *
 * This file is part of amalia.js
 *
 * Amalia.js is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option) any later
 * version
 *
 * Redistributions of source code, javascript and css minified versions must
 * retain the above copyright notice, this list of conditions and the following
 * disclaimer
 *
 * Neither the name of the copyright holder nor the names of its contributors
 * may be used to endorse or promote products derived from this software without
 * specific prior written permission
 *
 * You should have received a copy of the GNU General Public License along with
 * amalia.js. If not, see <http://www.gnu.org/licenses/>
 *
 * Amalia.js is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU General Public License for more details
 */
/**
 * Plugin overlay
 */
.ajs-plugin {
  &.plugin-overlay {
    display: block;
    color: #FFF;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 98;
    top: 0;
    &.eraser {
      cursor: pointer;
    }

    .overlay-canvas {
      /*border: 1px solid red;*/
    }
    .error {
      position: absolute;
      top: 9px;
      left: 0;
      width: 100%;
      line-height: 20px;
      color: white;
      font-size: 20px;
      background-color: red;
      font-weight: bold;
    }
    &.draw {
      cursor: crosshair;
    }
    .toolbox {
      width: 100px;
      position: absolute;
      top: 0;
      right: 0;
      border: none;
      padding: 0;
      margin: 0;
      cursor: move;
      opacity: 0.9;
      .add {
        .add-ctrl,
        .close-box,
        .add-shape-msg,
        .add-shape-rectangle,
        .add-shape-ellipse {
          height: 65px;
          width: 101px;
          background-color: #616161;
          color: white;
          font-size: 12px;
          line-height: 20px;
          text-align: center;
          box-shadow: 1px 1px 0px rgb(121, 121, 121);
          &.on {
            background-color: #99CC00;
          }
        }
        .add-shape-rectangle,
        .add-shape-ellipse {
          font-size: 50px;
          line-height: 75px;
        }
        .add-ctrl {
          background-color: #616161;
          .ctrl {
            background-color: #3cf;
          }
        }
        .close-box {
          background-color: #616161;
          .ctrl {
            background-color: transparent;
            border: 3px solid white;
          }
        }
      }
      .erase-box {
        height: 65px;
        width: 101px;
        background-color: rgba(49, 49, 49, 0.7);
        color: white;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        box-shadow: 1px 1px 0px rgb(121, 121, 121);
        &.on {
          background-color: #99CC00;
        }
        .ctrl {
          background-color: #E57373;
        }
      }
      .nav-box {
        background-color: rgba(121, 121, 121, 0.7);
        .nav-left-box,
        .nav-right-box {
          display: inline-block;
          text-align: center;
          width: 50px;
          height: 50px;
          margin: 0;
          padding: 0;
          line-height: 50px;
          .ctrl {
            margin: 0;
            padding: 0;
            &:hover {
              background-color: rgba(153, 204, 0, 0.7);
            }
          }
        }
      }
      .ctrl {
        height: 35px;
        width: 35px;
        display: inline-block;
        padding: 0px;
        font-size: 28px;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        margin: auto;
        position: relative;
        vertical-align: middle;
        box-shadow: none;
        line-height: 46px;
        margin: 10px 0px 0px 0px;
        border: 3px solid transparent;
        &.on {
          border: 3px solid rgb(153, 204, 0);
        }
      }

      .add-shapebox {
        background-color: rgba(49, 49, 49, 0.7);
      }
    }
  }
}