/*!
 * Copyright (c) 2014-present Cliqz GmbH. All rights reserved.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

@import "variables.scss";

@mixin transition($time_ms: 150ms) {
    transition: all $time_ms ease-in-out;
}

@mixin modal (
    $modal-form-width,
    $modal-form-padding,
    $modal-close-form-right,
    $modal-close-form-top,
    $modal-error-icon-top,
    $modal-error-icon-right
){
  .ReactModal__Overlay {
    @include transition(300ms);
    opacity: 0;

    &--after-open {
      opacity: 1;
    }

    &--before-close {
      opacity: 0;
    }
  }

  .toolbox-modal {
    min-height: 237px;
    height: 90%;
    width: 90%;
  }

  .modal {
    height: 237px;
  }

  .modal, .toolbox-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: $modal-form-width;
    transform: translate(-50%, -50%);
    outline: none;
    padding: 0px;

    .modal-header {
      display:flex;
      flex-direction:row;
      align-content:flex-start;
      top: 1.125em;
      font-size: 16.5px;
      color: $modal-header-color;
      font-weight: 500;
    }

    .close-form {
      position: absolute;
      background: url(../images/delete-icon.svg) no-repeat center;
      background-size: cover;
      float: right;
      right: 20px;
      top: 25px;
      margin: 0px;
      width: 34px;
      height: 34px;
      opacity: 0.7;
      cursor: pointer;
      text-align: right;
      color: #ccc;
      font-size: 18px;
      border: none;
      outline: none;

      &:hover, &:focus {
        @include transition;
        opacity: 1;
      }
    }

    .modal-form {
      background: #FFF;
      width: $modal-form-width;
      min-height: 237px;
      padding: $modal-form-padding;
      outline: none;
      overflow: hidden;
      border: none;
      border-radius: 4px;
      box-shadow: 0px 2px 35px get-color-black-opacity(0.27);
    }

    .field {
      display: flex;
      font-size: 14px;
      color: #fff;
      font-weight: 500;
      flex-flow: column-reverse;
      margin-bottom:22px;
      margin-top: 13px;
    }


    .modal-iframe {
      height: 100%;
      width: 100%;
      overflow-y: auto;
      border: none;
      padding: 0;
    }

    /* LABEL ======================================= */
    .input-label {
      color: $color-dark-beige;
      display: inline;
      font-size: 10px;
      min-height: 14px;
      font-weight: normal;
      position: absolute;
      z-index: 0;
    }

    .input-label, .modal-input {
      @include transition(200ms);
      position: relative;
      touch-action: manipulation;
    }

    .modal-input {
      font-size:14px;
      position: relative;
      border: 0;
      border-bottom: 1px solid $color-dark-beige;
      appearance: none;
      -webkit-appearance: none;
      padding-bottom: 2px;
      border-radius: 0;
      min-width: calc(#{$modal-form-width} - (2 * #{$modal-form-padding}));
      cursor: text;
      z-index: 10;
      background: transparent;
      height: 22px;
    }

    .modal-input:focus {
      outline: 0;
      padding-bottom: 1px;
      border-bottom: 2px solid $color-cliqz-blue;
    }

    /**
    * Translate down and scale the label up to cover the placeholder,
    * when following an input (with placeholder-shown support).
    * Also make sure the label is only on one row, at max 2/3rds of the
    * field—to make sure it scales properly and doesn't wrap.
    */
    .modal-input + .input-label {
      cursor: text;
      max-width: 66.66%;
      white-space: nowrap;
      padding-bottom: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      transform-origin: left bottom;
      transform: translate(0, 1.2rem) scale(1.4);
    }

    /**
    * When the element is focused, remove the label transform.
    * Also, do this when the placeholder is _not_ shown, i.e. when
    * there's something in the input at all.
    */

    .modal-input:focus + .input-label,
    .modal-input:not([value=""]) + .input-label {
      padding-bottom: 2px;
      transform: translate(0, 0) scale(1);
      color:$color-cliqz-blue;
    }

    .submit {
      background-color: $color-cliqz-blue;
      height: 30px;
      min-width: 110px;
      width: auto;
      font-size: 14px;
      color: #fff;
      font-weight: 500;
      margin: 0px;
      padding: 0px 15px 0px 15px;
      border-radius: 2px;
      letter-spacing: 1px;
      border: none;
      cursor: pointer;
      order: 2;
      align-self: flex-start;
      flex: none;

      &:disabled {
        background-color: #BFCBD6;
        cursor:auto;
      }

      &:hover:enabled, &:focus:enabled {
        background-color: $color-dark-blue;
      }
    }

    .error-message {
       color: $color-red !important;
    }

    .errorIcon {
      background: $modal-dial-invalid-url-background;
      background-size: 18px;
      position: absolute;
      top: $modal-error-icon-top;
      right: $modal-error-icon-right;
      width: 21px;
      height: 22px;
    }

    .errorIconInput {
      padding-right: 21px;
    }

    .deleteDial {
      position: relative;
      top: 6px;
      background: $modal-dial-delete-active-background;
      border: 0px;
      cursor: pointer;
      font-size: 12px;
      padding-left: 20px;
      width: auto;
      height: 18px;
      order:3;

      &:hover, &:focus {
        @include transition;
        background: $modal-dial-delete-hover-background;
        color: $color-red;
      }
    }

    .aligner {
      flex-direction: row;
      height: 30px;
      justify-content: space-between;
      display: flex;
      bottom:22px;
    }
  }

  .modules-developer-modal {
    background: #FFF;
    width: 100%;
    height: 100%;
    padding: 50px;
    outline: none;
    overflow: hidden;
    border: none;
    border-radius: 4px;
    box-shadow: 0px 2px 35px get-color-black-opacity(0.27);
  }
}
