/*
 * <<
 * Davinci
 * ==
 * Copyright (C) 2016 - 2017 EDP
 * ==
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * >>
 */

@import '~assets/less/variable';

:global {
  .display {
    &-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    &-slide {
      width: 100%;
      height: 100%;
      position: relative;
      box-shadow: @block-active-box-shadow;
      transform-origin: 0 0;
      transition: all ease-in 200ms;

      &-background {
        flex: 1;

        &-grid {
          background: url('~assets/images/grid.png') repeat;
        }
      }

      &-layer {
        position: absolute;
        user-select: none;
        display: flex;
        flex-direction: column;

        &-editing:hover:after {
          content: ' ';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: block;
          background: rgba(0, 192, 222, 0.2);
          z-index: 999990;
        }

        &-selected:after {
          content: ' ';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: block;
          background: rgba(0, 192, 222, 0.3);
          z-index: 999990;
          border: 2px solid @border-color-base;
        }

        & > * {
          flex: 1;
        }

        & > span:last-child {
          z-index: 999999;
        }

        & > span:nth-last-child(2) {
          z-index: 999999;
        }

        &-tools {
          display: none;
          position: absolute;
          right: 8px;
          z-index: 999998;

          i {
            color: #fff;
            font-size: 16px;
            line-height: 40px;
            display: inline-block;
            cursor: pointer;
            transition: transform 200ms ease;

            &:hover {
              transform: scale(1.1, 1.1);
            }
          }
        }

        &:hover &-tools {
          display: inline-block;
        }
        &-tooltips {
          display: none;
          position: absolute;
          top: -40px;
          left: 0;
          z-index: 999998;
          font-size: 24px;
          color: #fff;
          background-color: @black;
          padding: 0 8px;
          border-radius: 4px;
          .ellipsis;
        }
        &:hover &-tooltips {
          display: block;
        }
        &-editor {
          border-radius: @border-radius-base;
          .richtext {
            &-toolbar {
              border: @border-width-base @border-style-base @border-color-base;
              user-select: none;
              border-radius: 4px;
            }
          }
        }
      }
    }

    &-slide-baseline {
      position: absolute;
      z-index: 999999;
    }

    &-bottom {
      height: 40px;
      border: 1px solid @border-color-base;
      background-color: @white;
      box-shadow: @block-active-box-shadow;

      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      &-screenshot {
        display: flex;
        align-items: center;
        padding-left: 28px;

        i {
          font-size: 24px;
          cursor: pointer;

          &:hover {
            transform: scale(1.2, 1.2);
          }
        }
      }

      &-slider-wrapper {
        width: 240px;
        padding: 0 10px;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;

        label {
          width: 40px;
        }

        i {
          flex-shrink: 0;
          margin: 0 8px;
          color: @disabled-text-color;
          font-size: 18px;
          cursor: pointer;
        }
      }

      &-slider {
        flex: 1;
      }
    }
  }
}