
//
// Copyright © 2016-present Pouya Kary. All Rights Reserved
//   Author: Pouya Kary <k@karyfoundation.org>
//
// 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 http://mozilla.org/MPL/2.0/.
//

//
// ─── IMPORTS ────────────────────────────────────────────────────────────────────
//

    @import '../../globals';

//
// ─── SHOW ANIMATION ─────────────────────────────────────────────────────────────
//

    @keyframes show-dialog {
        from {
            opacity:                0;
            top:                    90px;
        }
        to {
            opacity:                100%;
            top:                    110px;
        }
    }

    @keyframes show-button {
        from {
            width:                  0;
        }
        to {
            width:                  80px;
        }
    }

//
// ─── DIALOGS ────────────────────────────────────────────────────────────────────
//

    #regexp-importer {
        left:                       190px;
    }

    .regexp-importer-input-box {
        border-radius:              100px;
        height:                     37px;
        max-height:                 37px;
        min-height:                 37px;
        width:                      370px;
        overflow:                   hidden;
        cursor:                     text;
    }

    @transition-duration:           0.4s;

    .full-input {
        width:                      370px;
        transition-duration:        @transition-duration;
    }

    .input-with-button {
        width:                      250px;
        transition-duration:        @transition-duration;
        border-top-right-radius:    100px;
        border-bottom-right-radius: 100px;
        margin-right:               10px;
        cursor: pointer;
    }

    .disabled-button {
        opacity:                    0;
        transition-duration:        @transition-duration;
        cursor:                     not-allowed;
    }

    .enabled-button {
        opacity:                    100%;
        transition-duration:        0.5s;
        cursor: pointer;
    }

//
// ─── MAIN BOX ───────────────────────────────────────────────────────────────────
//

    .hide-dialog {
        opacity:                    0;
        transition-duration:        0.3s;
    }

    .show-dialog {
        animation:                  show-dialog 0.4s;
    }

    #regexp-importer {
        user-select:                none;
        position:                   fixed;
        top:                        110px;
        width:                      370px;
        height:                     152px;
        background-image:           url('dialog-back.svg');
        padding:                    20px;
        overflow:                   hidden;
    }

    .dark > #EditorView > #orchestra-and-ribbon-half > .ribbon > #regexp-importer {
        background-image:           url('dark-dialog-back.svg');
    }

//
// ─── DIALOG INPUT ───────────────────────────────────────────────────────────────
//

    #regexp-importer-input {
        background-color:           var( --kary-background );
        color:                      var( --kary-foreground );
        float:                      left;
        border:                     none;
        font-size:                  1.2rem;
        vertical-align:             middle;
        font-family:                @source-code-pro-typeface;
        border-top-left-radius:     100px;
        border-bottom-left-radius:  100px;
        max-width:                  370px;
        min-height:                 37px;
        padding:                    0 15px 0 15px;
        margin:                     0;
    }

//
// ─── DIALOG BUTTON ──────────────────────────────────────────────────────────────
//

    #regexp-importer-button {
        width:                      80px;
        float:                      left;
        border-radius:              100px;
        border:                     none;
        vertical-align:             middle;
        color:                      var( --kary-background );
        font-size:                  0.8rem;
        border-top-right-radius:    100px;
        border-bottom-right-radius: 100px;
        min-height:                 37px;
        margin:                     0;
        text-align:                 center;
        text-transform:             uppercase;
        letter-spacing:             2px;
        margin-left:                10px;
    }

    #regexp-importer-button:hover {
        background-color:           var( --kary-green );
    }

//
// ─── DIALOG HEADER ──────────────────────────────────────────────────────────────
//

    #regexp-importer > h1 {
        color:                      var( --kary-blue );
        margin:                     15px 0 6px 5px;
        font-size:                  1.6rem;
    }

//
// ─── DIALOG TEXT ────────────────────────────────────────────────────────────────
//

    #regexp-importer > p {
        color:                      var( --kary-foreground );
        line-height:                1.4;
        padding:                    0;
        margin:                     4px 0 10px 5px;
        font-size:                  1.2rem;
    }

// ────────────────────────────────────────────────────────────────────────────────
