/*******************************
            Theme
*******************************/

// @type: 'extra';
// @element: 'main';

// @import (multiple) '../../theme.config';

// // Extras (third party libs)
// @import (less) '~hamburgers/dist/hamburgers.css';
// @import (less) '~react-toastify/dist/ReactToastify.css';

// General Styling

body {
  display: flex;

  @media only screen and (max-width: @largestMobileScreen) {
    flex-direction: column;
  }

  &.has-toolbar-menu-open {
    // The body scroll locker when the menu is active in mobile.
    @media only screen and (max-width: @largestMobileScreen) {
      overflow: hidden;
    }
  }
}

#main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.documentFirstHeading {
  position: relative;
  border-bottom: 2px solid @purpleBackground;

  &::before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 30px;
    height: 0;
    border-bottom: 3px solid @pink;
    content: '';
  }
}

.documentDescription {
  color: #5d7a8e;
  font-size: 1.125rem;
}

::-moz-selection {
  border-width: 20px;
  border-style: solid;
  background-color: rgba(31, 189, 238, 0.5);
  border-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj4KICA8ZyBmaWxsPSIjMUZCRUVGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii45NSI+CiAgICA8cGF0aCBkPSJNMTAgNjBDNC40NzcxNTI1IDYwIDAgNTUuNTI0MDYxOCAwIDUwIDMuNTUyNzEzNjhlLTE1IDQ0LjQ3NzE1MjUgNC40NzU5MzgxOCA0MCAxMCA0MEwyMCA0MCAyMCA1MEMyMCA1NS41MjI4NDc1IDE1LjUyNDA2MTggNjAgMTAgNjB6TTQwIDUwQzQwIDU1LjUyMjg0NzUgNDQuNDc1OTM4MiA2MCA1MCA2MEw1MCA2MEM1NS41MjI4NDc1IDYwIDYwIDU1LjUyNDA2MTggNjAgNTBMNjAgNTBDNjAgNDQuNDc3MTUyNSA1NS41MjQwNjE4IDQwIDUwIDQwTDQwIDQwIDQwIDUwIDQwIDUweiIvPgogIDwvZz4KPC9zdmc+Cg==')
    20 fill repeat;
}

::selection {
  border-width: 20px;
  border-style: solid;
  background-color: rgba(31, 189, 238, 0.5);
  border-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj4KICA8ZyBmaWxsPSIjMUZCRUVGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii45NSI+CiAgICA8cGF0aCBkPSJNMTAgNjBDNC40NzcxNTI1IDYwIDAgNTUuNTI0MDYxOCAwIDUwIDMuNTUyNzEzNjhlLTE1IDQ0LjQ3NzE1MjUgNC40NzU5MzgxOCA0MCAxMCA0MEwyMCA0MCAyMCA1MEMyMCA1NS41MjI4NDc1IDE1LjUyNDA2MTggNjAgMTAgNjB6TTQwIDUwQzQwIDU1LjUyMjg0NzUgNDQuNDc1OTM4MiA2MCA1MCA2MEw1MCA2MEM1NS41MjI4NDc1IDYwIDYwIDU1LjUyNDA2MTggNjAgNTBMNjAgNTBDNjAgNDQuNDc3MTUyNSA1NS41MjQwNjE4IDQwIDUwIDQwTDQwIDQwIDQwIDUwIDQwIDUweiIvPgogIDwvZz4KPC9zdmc+Cg==')
    20 fill repeat;
}

// SVGs
svg.circled {
  box-sizing: content-box;
  padding: 4px;
  border: 2px solid currentColor;
  border-radius: 50px;
}

svg.icon {
  // Experiment if this is ok for all icons
  box-sizing: content-box;
}

button .close {
  color: @darkHotPink;
}

// Override default behavior for forms and segments
.ui.form,
.ui.segments,
.ui.segment {
  position: static !important;
}

// Buttons colored
button {
  &.contents {
    color: @teal-blue;
  }

  &.save {
    color: @teal-blue;
  }

  &.cancel {
    color: @darkHotPink;
  }

  &.edit {
    color: @teal-blue;
  }
}

// Button reset
.button-reset {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: initial;

  &:focus {
    outline: none;
  }
}

// Drag and drop
.drag.handle {
  cursor: move;
}

.drag.layer {
  position: relative;
  padding: 1rem 2rem 1rem 2rem;
  margin: -1rem -2rem 0 -2rem;
}

.drag.layer:hover .drag.edit,
.drag.layer:hover .drag.toolbar {
  display: block;
}

.drag.layer .drag.handle {
  margin-bottom: 0.5rem;
}

.drag.toolbar {
  position: absolute;
  top: 12px;
  left: 0;
  display: none;
}

.drag.edit {
  position: absolute;
  top: 12px;
  right: 0;
  display: none;
}

// Toolbar
.editbar {
  position: fixed;
  z-index: 10;
  top: 60px;
  left: 400px;
}

// Diff view
.deletion {
  background-color: #f8cbcb;
}

.addition {
  background-color: #a6f3a6;
}

// Socialmedia sharing
.SocialMediaShareCount,
.SocialMediaShareButton {
  display: inline-block;
}

// Header
.tools {
  margin-right: 1em;
}

// Comments
.comments {
  margin-top: 20px;
}

// Toasts
.Toastify__toast-container {
  width: 480px;
  color: inherit;

  @media only screen and (max-width: @largestMobileScreen) {
    width: 100vw;
  }
}

.Toastify__toast-container--bottom-center {
  bottom: 0;
  padding: 0;
  margin-left: -240px;

  @media only screen and (max-width: @largestMobileScreen) {
    margin-left: 0;
  }

  .Toastify__toast {
    min-height: 60px;
    align-items: center;
    padding: 18px;
    margin-bottom: 0;
  }

  .Toastify__toast-body {
    display: flex;
  }

  .toast-inner-content {
    margin-left: 8px;

    h4 {
      padding-top: 4px;
      margin-bottom: 0;
      font-weight: @bold;
    }

    p {
      font-weight: 300;
    }
  }

  .toast-dismiss-action {
  }

  .Toastify__toast--info {
    background: #aee2f2;
  }

  .Toastify__toast--error {
    background: #f5c1c1;
  }

  .Toastify__toast--success {
    background: #c9eab1;
  }

  .Toastify__toast--warning {
    background: #f3e2ab;
  }
}

.users-control-panel .table {
  overflow-x: scroll;

  &::-webkit-scrollbar {
    width: 3px;
    height: 3px; /* scrollbar height */
    background: transparent; /* optional: just make scrollbar invisible */
  }
}

// @import 'utils';
// @import 'toolbar';
// @import 'draftjs';
// @import 'blocks';
// @import 'sidebar';

// .loadUIOverrides();

.document_wide_view {
  .content-area {
    main {
      padding: 3rem 1rem;

      #page-document {
        padding: 0;
      }
    }
  }
}