/*
 * This file is part of TREB.
 *
 * TREB 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.
 *
 * TREB 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.
 *
 * You should have received a copy of the GNU General Public License along 
 * with TREB. If not, see <https://www.gnu.org/licenses/>. 
 *
 * Copyright 2022-2026 trebco, llc. 
 * info@treb.app
 * 
 */

.treb-main.treb-main {

  --treb-icon-svg: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='153.073px' height='133.742px' viewBox='0.673 4.629 153.073 133.742' enable-background='new 0.673 4.629 153.073 133.742' xml:space='preserve'%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='0.6729' y1='71.5' x2='153.7461' y2='71.5'%3E%3Cstop offset='0' style='stop-color:%235CB5FF'/%3E%3Cstop offset='1' style='stop-color:%230059B9'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23SVGID_1_)' d='M91.656,28.313c-4.989,0-17.266,6.249-21.305,8.504c-2.344-2.473-2.603-6.162-3.036-10.933 c-2.344,2.429-0.824,9.806,0,12.496c-10.238,7.635-18.83,15.531-27.597,24.471c-2.992-4.729-5.031-8.593-5.726-17.183 c-3.038,6.509,0.867,15.057,3.121,19.784c-9.674,12.193-19.263,25.297-27.03,37.834C-25.405,28.313,82.936-16.248,153.746,14.431 C109.879,43.63,98.554,135.784,21.498,111.274c-5.423,7.809-9.069,18.006-13.538,27.072c-3.73,0.263-6.334-1.646-7.288-3.12 c7.506-18.181,17.183-34.192,27.075-49.984c10.718,0.306,21.346,0.478,30.198-1.04c-7.681-2.038-16.877-0.78-26.032-3.123 c5.597-10.718,13.754-18.876,21.867-27.075c8.808,0.782,17.746,3.21,27.074,1.041c-8.111-1.431-15.966-1.952-22.909-4.165 C65.539,42.502,80.722,33.389,91.656,28.313z'/%3E%3C/svg%3E%0A");
  
  .treb-icon-64 {
    width: 64px;
    height: 64px;
    background: no-repeat center/100% var(--treb-icon-svg);
  }

  .treb-dialog-mask {
    
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;

    // background: rgba(255, 0, 0, .5); // dev

    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;

  }

  .treb-embed-dialog {

    line-height: 1.6em;

    font-size: var(--treb-dialog-font-size, 16px);
    border: 1px solid var(--treb-dialog-border-color, var(--treb-ui-border-color, #999));
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .3);

    border-top-width: 3px;
    border-top-color: rgb(0, 157, 255);
    border-top-color: rgb(158, 175, 185);
    border-top-color: #999;

    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    padding: 1rem;
    background: var(--treb-dialog-background, #fff);
    color: var(--treb-dialog-color, #000);

    text-align: left;
    border-radius: 3px;

    & > * {
      display: none;
    }

    & > div {
      position: relative;
    }

    /* middle: title, message and (maybe) progress bar */
    &>*:nth-child(2) {
      flex-grow: 1;
      display: block;
      padding: 2px 12px;
      padding-right: 20px;
    }

    &>.treb-close-box {

      position: absolute;
      top: 0;
      right: 0px;
      padding: 0;
      background: transparent;
      border: 0;
      padding: 4px;

      &>svg {

        fill: rgb(115, 130, 140);
        width: 20px;
        height: 20px;
        cursor: default;

        &:hover,
        &:active {
          fill: rgb(4, 156, 251);
        }
      }


    }

    small {
      font-size: .9em;
      display: block;
    }

    a {
      text-decoration: none;
      color: inherit;

      &:hover,
      &:active {
        color: rgb(4, 156, 251);
      }
    }

    &.dialog-type-success {
      border-top-width: 3px;
      border-top-color: rgb(68, 217, 38);
    }

    &.dialog-type-about {
      border-top-width: 3px;
      border-top-color: rgb(0, 157, 255);
    }

    &.dialog-type-error {
      border-top-width: 3px;
      border-top-color: rgb(249, 47, 6);
    }

    &.dialog-type-info {
      border-top-width: 3px;
      border-top-color: rgb(0, 157, 255);
    }

    .treb-embed-dialog-title {
      white-space: pre;
    }

    .treb-embed-dialog-message {
      white-space: pre;
    }

    .treb-embed-progress-container {
      position: relative;
      border: 1px solid red;
      width: 100%;
      height: 6px;
      border: 1px solid #ddd;
      margin: auto;
      margin-top: 1rem;
      margin-bottom: .5rem;
    }

    .treb-embed-progress-bar {
      position: relative;
      background: #52880b;
      top: 0px;
      left: 0px;
      height: 100%;
    }

  }

}