@import "../shared/ui-components/styles/variables";
@import "../assets/fonts/variables";

.header-container {
  height: 66px;
}

.md-editor-preview {
  display: flex;
  flex-direction: column;
  height: calc(100% - 66px);
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 24px 24px;

  &.editor {
    max-width: 1580px;
  }
}

.md-btn-edit {
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s, visibility 0.25s, background-color 0.25s, color 0.25s;
}

.md-content {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  background-color: $blue-900;
  border-radius: 4px;
  padding: 12px 0 12px 12px;

  &.edit-mode {
    padding: 0;

    &.dirty {
      box-shadow: 0 0 0 2px $blue-600;
    }
  }

  &:hover {
    .md-btn-edit {
      visibility: visible;
      opacity: 1;

      &:hover {
        background-color: $purple;
        color: white !important;
      }
    }
  }

  .btn:focus {
    box-shadow: none !important;
  }
}

.md-footer {
  display: flex;
  margin-top: 12px;
}

.right-buttons {
  margin-left: auto;
}

.md-warning {
  font-size: 14px;
  color: #cb6874;
}

.btn-outline {
  background-color: transparent;
  margin-right: 12px;
  border: 1px solid $blue-600;
}

.no-data-title {
  font-size: 20px;
  color: $blue-100;
  font-weight: 500;
  margin: 24px 0;
}

.no-data-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

:host {

  // dark theme
  ::ng-deep .md-layout {

    @media (max-width: 990px) {
      .preview-container {
        display: none;
      }
    }

    .tool-bar {
      background-color: #141822 !important;
      border-bottom: 1px solid #1d2230 !important;

      .btn:first-child:before {
        display: none;
      }

      .btn-group {
        button {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          width: 24px;
          height: 24px;
          margin: 0 3px;
          border-radius: 2px !important;
          color: $blue-300;
          background-color: $blue-600;

          &:hover {
            background-color: darken($blue-600, 5);
          }

          .fa {
            font-size: 24px;
            width: 24px;
            height: 24px;
            font-family: "trains", sans-serif;
            font-weight: 400;

            &.fa-bold:before {
              content: $al-ico-bold;
            }

            &.fa-italic:before {
              content: $al-ico-italic;
            }

            &.fa-header:before {
              content: $al-ico-heading;
            }

            &.fa-quote-left:before {
              content: $al-ico-quote;
            }

            &.fa-link:before {
              content: $al-ico-link;
            }

            &.fa-image:before {
              content: $al-ico-image;
            }

            &.fa-list-ul:before {
              content: $al-ico-list-bulleted;
            }

            &.fa-list-ol:before {
              content: $al-ico-list-numbered;
            }

            &.fa-file-code-o:before {
              content: $al-ico-code;
            }
          }
        }
      }
    }

    .ace_gutter {
      background-color: #1c2132;
      color: #989899;

      .ace_gutter-active-line {
        background-color: #2e4258;
        color: #d5d9de;
      }
    }

    .editor-panel {
      border-right: 1px solid $blue-500;
    }

    @media (max-width: 990px) {
      .editor-panel {
        border-right: none;
      }
    }

    .preview-panel {
      height: unset !important;
      background-color: transparent !important;

      code.hljs {
        background-color: $blue-800;
      }

      pre {
        color: white !important;
      }
    }

    ::ng-deep .ace_scrollbar-v {
      cursor: default;
    }

    // Highlighting Editor
    .ace-editor.ace_editor.ace-tm {
      background-color: transparent;

      .ace_line {
        color: #e1e1e1;
      }

      .ace_cursor {
        color: #e1e1e1;
      }

      .ace_marker-layer.ace_active-line {
        color: $blue-600;
      }

      .ace_print-margin {
        display: none;
      }

      .ace_content {
        .ace_heading {
          color: #7d7af7;
        }

        .ace_string {
          color: #2f9633;

          &.ace_strong,
          &.ace_emphasis {
            color: #2f9633;
          }
        }

        .ace_storage {
          &.ace_type {
            color: #347ff1;
          }
        }

        .ace_text {
          &.ace_xml {
            color: #e1e1e1;
          }
        }

        .ace_support.ace_function,
        .ace_keyword {
          color: #cc8705;
        }

        .ace_entity {
          &.ace_name {
            &.ace_function {
              color: #569fd5;
            }
          }
        }

        .ace_punctuation {
          &.ace_operator {
            color: #e1e1e1;
          }
        }

        .ace_paren {
          &.ace_lparen,
          &.ace_rparen {
            color: #e1e1e1;
          }
        }

        .ace_markup {
          &.ace_underline {
            color: #e1e1e1;

          }
        }

        .ace_list {
          color: #ef3bc5;
        }
      }
    }

    // Highlighting Preview
    .preview-panel {
      h1 {
        color: $light-periwinkle-two;
      }

      h2 {
        color: $light-grey-blue;
        margin-top: 32px;
      }

      h3, h4 {
        color: #7482ad;
        font-weight: 400;
      }

      strong, em {
        color: #c4cded;
      }

      hr {
        border-bottom: 1px solid #1d2230;
      }

      a {
        color: #FFFFFF;
      }

      .table {
        background-color: transparent;

        td, th {
          border-bottom: 1px solid #303443;
          font-weight: 400;
          line-height: 32px;
        }

        th {
          background-color: $blue-800;
          color: $blue-400;
        }
      }
    }
  }
}

.preview-header {
  position: absolute;
  top: 12px;
  z-index: 1;
  right: 25%;
  transform: translateX(50%);
  font-size: 12px;
  font-weight: 500;
  color: $blue-300;
}

@media (max-width: 990px) {
  .preview-header {
    display: none;
  }
}

.md-content .btn-preview-toggle {
  position: absolute;
  top: 6px;
  right: 12px;
  z-index: 1;
  display: none;
}

@media (max-width: 990px) {
  .md-content .btn-preview-toggle {
    display: block;
  }
}


