$headerHeight: 42px;
$iconSize: 20px;
$borderRadius: 4px;
$transitionLength: 0.3s;
$primaryColor: lightslategrey;
$secondaryColor: #8495a6;
$iconColor: white;
$hoverColor: #ccc;

@mixin mobile {
  @media only screen and (max-width: 640px) {
    @content;
  }
}

html,
body {
  height: 100% !important;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;

  svg {
    fill: currentColor;
  }

  #root {
    height: 100%;

    .rtf--mb__c {
      //fix the fab button so it doesn't conflict with the imageEditor save button'
      padding-left: 0;
    }

    .wrapper {
      height: 100%;

      .container {
        .empty-state {
          display: flex;
          justify-content: center;
          align-content: center;
          flex-direction: column;
          width: 100%;
          font-size: 32pt;
          background: #ddd;
          text-align: center;
          font-weight: 300;
        }

        .section {
          .placeholder {
            text-align: center;
            margin-top: 25px;
            font-size: 16pt;

            @include mobile {
              margin-top: 62px;
            }
          }

          .header {
            width: 100%;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            background: $primaryColor;
            color: white;

            .title {
              display: flex;
              padding: 10px 0 10px 10px;

              svg {
                position: relative;
                top: 2px;
                cursor: pointer;
                color: $iconColor;
                width: $iconSize;
                height: $iconSize;

                &:hover {
                  color: $hoverColor;
                }
              }

              h3 {
                margin: 0;
                padding-left: 3px;
              }
            }

            .settings {
              position: relative;
              cursor: pointer;
              padding-right: 10px;

              svg {
                color: $iconColor;
                width: $iconSize;
                height: $iconSize;
                margin-top: 12px;

                &:hover {
                  color: $hoverColor;
                }
              }

              &:hover {
                .dropdown {
                  visibility: visible;
                  opacity: 1;
                }
              }

              .dropdown {
                visibility: hidden;
                opacity: 0;
                position: absolute;
                top: $headerHeight;
                right: 5px;
                background: $primaryColor;
                transition: all $transitionLength ease;
                z-index: 3;
                box-shadow: -1px 6px 8px -4px rgba(0, 0, 0, 0.75);
                border-radius: 0 0 $borderRadius $borderRadius;

                ul {
                  margin: 0;
                  padding: 0;
                  list-style: none;

                  li {
                    position: relative;
                    white-space: nowrap;
                    padding: 8px 10px;

                    &:hover {
                      background: #91a2b3;

                      & > ul {
                        visibility: visible;
                        opacity: 1;
                      }

                      &:last-child {
                        border-radius: 0 0 $borderRadius $borderRadius;
                      }
                    }

                    &:last-child {
                      border-radius: 0 0 $borderRadius $borderRadius;
                    }

                    &.active {
                      background: #67727d;
                    }

                    ul {
                      position: absolute;
                      top: 0;
                      right: 100%;
                      overflow: auto;
                      visibility: hidden;
                      opacity: 0;
                      max-height: 230px;
                      transition: all $transitionLength ease;
                      background: $primaryColor;
                      box-shadow: -1px 6px 8px -4px rgba(0, 0, 0, 0.75);
                      border-radius: $borderRadius 0 $borderRadius $borderRadius;

                      &:hover {
                        visibility: visible;
                        opacity: 1;
                      }
                    }
                  }
                }
              }
            }
          }

          .content {
            position: relative;
            // top: $headerHeight;
            height: calc(100% - #{$headerHeight});
            box-sizing: border-box;
            padding-bottom: 10px;

            .editor {
              min-height: 100%;
              display: flex;
              flex-direction: column;

              .toolbar-wrapper {
                flex: 0;
              }
              > div {
                display: flex;
                flex-direction: column;
                flex: 1;

                > div:last-child {
                  display: flex;
                  flex-direction: column;
                  flex: 1;
                }

                @include mobile {
                  display: block;
                  flex: 0;
                }
              }

              .DraftEditor-root {
                display: flex;
                flex-direction: column;
                flex: 1;

                .DraftEditor-editorContainer {
                  flex: 1;
                  display: flex;
                  flex-direction: column;

                  > div:first-child {
                    flex: 1;
                  }

                  @include mobile {
                    padding: 0;
                  }
                }
              }
            }

            .react-monaco-editor-container {
              padding: 10px 0;
            }

            .editor,
            .viewer {
              box-sizing: border-box;
              padding: 10px 50px 0;

              @include mobile {
                padding: 0;
              }
            }
          }
        }

        .splitter {
          cursor: column-resize;
          z-index: 5;
          width: 3px;
          background: $secondaryColor;
          border-right: 1px solid $primaryColor;
          border-left: 1px solid $primaryColor;
        }
      }
    }

    .DraftEditor-root,
    div[class^='rich-content-viewer__wrapper'] {
      overflow: visible;

      @include mobile {
        top: 0;
        padding: 18px;
      }
    }
  }
}

.content-preview {
  background: #eff;
  border: 1px solid #eee;
}