//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
// Dialog
//

@dialog-backdrop-background-color: fade(@background-color, 75);
@dialog-backdrop-background-color-opaque: @background-color;

@dialog-background-color: contrast(@background-color, @background-color, lighten(@background-color, 5%));
@dialog-busy-backdrop-background-color: @dialog-backdrop-background-color;

@dialog-border-color: @border-color;
@dialog-border-radius: @panel-border-radius;
@dialog-border-width: 1px;
@dialog-box-shadow: 0 16px 16px -10px fade(@color-black, 15%), 0 0 40px 1px fade(@color-black, 15%);

@dialog-header-background-color: @dialog-background-color;
@dialog-header-padding: @pad-sm @pad-md 0 @pad-md;
@dialog-header-separator-border: none;

@dialog-footer-background-color: @dialog-background-color;
@dialog-footer-padding: @pad-sm @pad-md;
@dialog-footer-separator-border: 1px solid @dialog-border-color;

@dialog-body-padding: @pad-md @pad-md;

@dialog-title-font-family: @font-stack;
@dialog-title-font-size: @font-size-lg;
@dialog-title-font-style: normal;
@dialog-title-font-weight: @font-weight-normal;
@dialog-title-line-height: @line-height-base;
@dialog-title-text-color: @text-color;
@dialog-title-text-transform: none;

@dialog-body-font-size: @font-size-md;
@dialog-body-font-style: normal;
@dialog-body-font-weight: @font-weight-normal;
@dialog-body-line-height: @line-height-base;
@dialog-body-text-align: left;
@dialog-body-text-color: @text-color;
@dialog-body-text-transform: none;

@dialog-body-link-color: @color-tint;
@dialog-body-link-text-decoration: none;
@dialog-body-link-hover-color: darken(@color-tint, 10%);
@dialog-body-link-hover-text-decoration: none;
@dialog-body-link-active-color: darken(@color-tint, 10%);
@dialog-body-link-active-text-decoration: none;

@dialog-table-border-color: @border-color;
@dialog-nav-focus-background-color: fade(@color-tint, 10%);

// These get stacked on top of the global dialog z-index (1100)
@z-index-dialogs-offset-wrap-background: 1;
@z-index-dialogs-offset-dialog: 2;
@z-index-dialogs-offset-busy-spinner: 3;

.tox {
  .tox-dialog-wrap {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: @z-index-dialogs;
  }

  .tox-dialog-wrap__backdrop {
    background-color: @dialog-backdrop-background-color;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: @z-index-dialogs-offset-wrap-background;
  }

  // modal backdrop with 100% full opacity for mobile
  .tox-dialog-wrap__backdrop--opaque {
    background-color: @dialog-backdrop-background-color-opaque;
  }

  .tox-dialog {
    background-color: @dialog-background-color;
    border-color: @dialog-border-color;
    border-radius: @dialog-border-radius;
    border-style: solid;
    border-width: @dialog-border-width;
    box-shadow: @dialog-box-shadow;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    max-width: 480px;
    overflow: hidden;
    position: relative;
    width: 95vw;
    z-index: @z-index-dialogs-offset-dialog;

    @media @breakpoint-sm {
      body:not(.tox-force-desktop) & {
        align-self: flex-start;
        margin: @pad-sm auto;
        width: calc(100vw - @pad-md);
      }
    }
  }

  // This is needed for inline dialogs, since they don't use the wrapper/backdrop
  .tox-dialog-inline {
    z-index: @z-index-dialogs;
  }

  .tox-dialog__header {
    align-items: center;
    background-color: @dialog-header-background-color;
    border-bottom: @dialog-header-separator-border;
    color: @dialog-title-text-color;
    display: flex;
    font-size: @font-size-base;
    justify-content: space-between;
    padding: @dialog-header-padding;
    position: relative;
  }

  .tox-dialog__header .tox-button {
    z-index: 1;
  }

  .tox-dialog__draghandle {
    cursor: grab;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .tox-dialog__draghandle:active {
    cursor: grabbing;
  }

  .tox-dialog__dismiss {
    margin-left: auto;
  }

  .tox-dialog__title {
    font-family: @dialog-title-font-family;
    font-size: @dialog-title-font-size;
    font-style: @dialog-title-font-style;
    font-weight: @dialog-title-font-weight;
    line-height: @dialog-title-line-height;
    margin: 0;
    text-transform: @dialog-title-text-transform;
  }

  .tox-dialog__body {
    color: @dialog-body-text-color;
    display: flex;
    flex: 1;
    -ms-flex-preferred-size: auto;
    font-size: @dialog-body-font-size;
    font-style: @dialog-body-font-style;
    font-weight: @dialog-body-font-weight;
    line-height: @dialog-body-line-height;
    min-width: 0;
    text-align: @dialog-body-text-align;
    text-transform: @dialog-body-text-transform;

    @media @breakpoint-sm {
      body:not(.tox-force-desktop) & {
        flex-direction: column;
      }
    }
  }

  .tox-dialog__body-nav {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    padding: @dialog-body-padding;

    @media @breakpoint-sm {
      body:not(.tox-force-desktop) & {
        flex-direction: row;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        padding-bottom: 0;
      }
    }
  }

  .tox-dialog__body-nav-item {
    border-bottom: 2px solid transparent;
    color: @text-color-muted;
    display: inline-block;
    font-size: @font-size-sm;
    line-height: @line-height-base;
    margin-bottom: @pad-sm;
    text-decoration: none;
    white-space: nowrap;

    &:focus {
      background-color: @dialog-nav-focus-background-color;
    }
  }

  .tox-dialog__body-nav-item--active {
    border-bottom: 2px solid @color-tint;
    color: @color-tint;
  }

  .tox-dialog__body-content {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    -ms-flex-preferred-size: auto;
    max-height: 650px; // TODO (verify max-height for dialogs)
    overflow: auto; //overflow controls all scrolling in the dialogs
    -webkit-overflow-scrolling: touch;
    padding: @dialog-body-padding;

    > * {
      margin-bottom: 0;
      margin-top: @pad-md;
    }

    > *:first-child {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }

    > *:only-child {
      margin-bottom: 0;
      margin-top: 0;
    }

    a {
      color: @dialog-body-link-color;
      cursor: pointer;
      text-decoration: @dialog-body-link-text-decoration;

      &:hover,
      &:focus {
        color: @dialog-body-link-hover-color;
        text-decoration: @dialog-body-link-hover-text-decoration;
      }

      &:active {
        color: @dialog-body-link-active-color;
        text-decoration: @dialog-body-link-active-text-decoration;
      }
    }

    svg {
      fill: @dialog-body-text-color;
    }

    ul {
      display: block;
      list-style-type: disc;
      margin-bottom: @pad-md;
      margin-inline-end: 0;
      margin-inline-start: 0;
      padding-inline-start: 2.5rem;
    }

    .tox-form__group h1 {
      font-size: @font-size-lg;
      font-weight: bold;
      margin-bottom: @pad-md;
      margin-top: 2rem;
    }

    .tox-form__group h2 {
      font-size: @font-size-md;
      font-weight: bold;
      margin-bottom: @pad-md;
      margin-top: 2rem;
    }

    .tox-form__group p {
      margin-bottom: @pad-md;
    }

    .tox-form__group h1:first-child,
    .tox-form__group h2:first-child,
    .tox-form__group p:first-child {
      margin-top: 0;
    }

    .tox-form__group h1:last-child,
    .tox-form__group h2:last-child,
    .tox-form__group p:last-child {
      margin-bottom: 0;
    }

    .tox-form__group h1:only-child,
    .tox-form__group h2:only-child,
    .tox-form__group p:only-child {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  .tox-dialog--width-lg {
    height: 650px; // The height property is required to flex the textarea within large dialogs to fit to parent
    max-width: 1200px;
  }

  .tox-dialog--width-md {
    // TODO (verify width for size medium)
    max-width: 800px;

    .tox-dialog__body-content {
      overflow: auto;
    }
  }

  // Centers content within a dialog body
  .tox-dialog__body-content--centered {
    text-align: center;
  }

  .tox-dialog__footer {
    align-items: center;
    background-color: @dialog-footer-background-color;
    border-top: @dialog-footer-separator-border;
    display: flex;
    justify-content: space-between;
    padding: @dialog-footer-padding;
  }

  .tox-dialog__footer-start,
  .tox-dialog__footer-end {
    display: flex;
  }

  // Make a dialog disabled for user input
  .tox-dialog__busy-spinner {
    align-items: center;
    background-color: @dialog-busy-backdrop-background-color;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: @z-index-dialogs-offset-busy-spinner;
  }

  // the blocking div for dialogs
  .tox-dialog-blocker-wrap {
    //
  }

  .tox-dialog__table {
    border-collapse: collapse;
    width: 100%;

    thead {
      th {
        font-weight: @font-weight-bold;
        padding-bottom: @pad-sm;
      }
    }

    tbody {
      tr {
        border-bottom: 1px solid @dialog-table-border-color;
      }

      tr:last-child {
        border-bottom: none;
      }
    }

    td {
      padding-bottom: @pad-sm;
      padding-top: @pad-sm;
    }
  }

  // Make popups in a dialog appear over other dialog (urlinput, colorinput etc)
  .tox-dialog__popups {
    position: absolute;
    width: 100%;
    z-index: @z-index-dialogs;
  }

  // Make iframe/url dialogs stretch contents to fit the height and width of parent container
  .tox-dialog__body-iframe {
    display: flex;
    flex: 1;
    flex-direction: column;
    -ms-flex-preferred-size: auto;

    .tox-navobj {
      display: flex;
      flex: 1;
      -ms-flex-preferred-size: auto;
    }

    // the nav object spec is surrounded by tab stop objects, so apply flex to the middle element
    .tox-navobj :nth-child(2) {
      flex: 1;
      -ms-flex-preferred-size: auto;
      // IE 11
      height: 100%;
    }
  }

  // Transition styles for inline dialogs
  .tox-dialog-dock-fadeout {
    opacity: 0;
    visibility: hidden;
  }

  .tox-dialog-dock-fadein {
    opacity: 1;
    visibility: visible;
  }

  .tox-dialog-dock-transition {
    transition: visibility 0s linear .3s, opacity .3s ease;
  }

  .tox-dialog-dock-transition.tox-dialog-dock-fadein {
    transition-delay: 0s;
  }
}

// Added to the body to disable scrolling when dialogs are open
body.tox-dialog__disable-scroll {
  overflow: hidden;
}

.tox.tox-platform-ie {
  /* IE11 CSS styles go here */
  .tox-dialog-wrap {
    position: -ms-device-fixed;
  }
}

.tox:not([dir=rtl]) {
  .tox-dialog__body-nav {

    @media @breakpoint-sm {
      body:not(.tox-force-desktop) & {
        margin-right: 0;
      }
    }
  }

  .tox-dialog__body-nav-item {

    @media @breakpoint-sm {
      body:not(.tox-force-desktop) & {
        &:not(:first-child) {
          margin-left: @pad-sm;
        }
      }
    }
  }

  .tox-dialog__footer {
    .tox-dialog__footer-start,
    .tox-dialog__footer-end {
      > * {
        margin-left: @pad-sm;
      }
    }
  }
}

// RTL
.tox[dir=rtl] {
  .tox-dialog__body {
    text-align: right;
  }

  .tox-dialog__body-nav {

    @media @breakpoint-sm {
      body:not(.tox-force-desktop) & {
        margin-left: 0;
      }
    }
  }

  .tox-dialog__body-nav-item {

    @media @breakpoint-sm {
      body:not(.tox-force-desktop) & {
        &:not(:first-child) {
          margin-right: @pad-sm;
        }
      }
    }
  }

  .tox-dialog__footer {
    .tox-dialog__footer-start,
    .tox-dialog__footer-end {
      > * {
        margin-right: @pad-sm;
      }
    }
  }
}