// sortable
.sortable-placeholder {
  list-style    : none;
  border        : 1px dashed #cccccc;
  min-height    : 50px;
  margin-bottom : 5px
}

// input
.chosen-choices, .chosen-single, .bootstrap-tagsinput {
  @extend .form-control;
}

.select2-search__field {
  width : 100% !important;
}
.select2{
    width: 100% !important;
    min-width: 10em;
    max-width: 600px;
}
.select2-container--bootstrap {

  .select2-selection {
    @include box-shadow(none);
    border : 1px solid $form-control-border-color;
  }

  .select2-dropdown {
    border-color : fade-out($black, 0.9);
    outline      : 0 !important;
    @include box-shadow(none);
    @include placeholder($text-muted);
    z-index: 1200;
  }

  &.select2-container--focus .select2-selection, &.select2-container--open .select2-selection {
    border-color     : fade-out($black, 0.9);
    background-color : $grey-light;
    outline          : 0 !important;
    @include box-shadow(none);
    @include placeholder($text-muted);
  }

  .select2-results__option--highlighted[aria-selected]{
    background-color : $grey-light;
    color: inherit;
  }

}
.select2-container--bootstrap.select2-container--disabled .select2-selection{
    background: mix($grey-light, #fff, 50%);
    color: fade-out($grey, .77);
    border: 1px solid $form-control-border-color;
}

// SimpleMDE Markdown Editor
.CodeMirror-fullscreen, .editor-toolbar.fullscreen, .editor-preview-side {
  z-index : 1040;
}
.CodeMirror-fullscreen{
  background-color: $body-bg;
  @extend .py-2;
  @extend .px-3;

  .CodeMirror-code,
  .editor-preview-active,
  .CodeMirror-sizer,
  .CodeMirror-scroll{
    max-width: 60em!important;
    margin: 0 auto;
    position: relative;
  }

  .CodeMirror-scroll{
    @extend .card;
    @extend .py-2;
    @extend .px-3;
  }

  .CodeMirror-sizer {
    max-width: 100%;
  }

  .CodeMirror-vscrollbar{
    overflow: hidden;
  }

  .CodeMirror-scroll{
    overflow: auto!important;
  }

}

.editor-preview-side{
    border-left: none !important;
    @extend .border-top;
    @extend .bg-white;
    @extend .py-2;
    @extend .px-3;
}

.editor-toolbar.fullscreen{
  text-align: center;
}

.CodeMirror.CodeMirror-fullscreen.CodeMirror-sided {
  padding: 0;
  margin: 0;
  left: 0;
  .CodeMirror-scroll{
    width: 100%;
    margin: 0;
    max-width: 100%!important;
    border: none;
  }
}

.simplemde-wrapper{
  .editor-toolbar{
      @extend .border-top;
      @extend .border-start;
      @extend .border-end;
  }

  .CodeMirror{
    border: 1px solid $form-control-border-color;
  }

  img {
      max-width: 100%;
  }
}


// Datetimepicker
.bootstrap-datetimepicker-widget {
  &.dropdown-menu {
    width : 18rem;
  }
  .table-condensed {
    > tbody,
    > thead,
    > tfoot {
      > tr {
        > td,
        > th {
          padding : 4px;
        }
      }
    }
  }

}

// Flatpickr
.flatpickr-wrapper{
  width: 100%;
}

.flatpickr-input {
    &.form-control[readonly] {
        background: $white;
        color: $black;
    }
}

.CodeMirror-wrap pre{
  word-wrap: break-word;
  word-break: break-all;
}

//codeflask
.codeflask{
  pre,code {
    background: none!important;
  }
  code[class*="language-"], pre[class*="language-"] {
    line-height: 20px;
    width: fit-content;
  }
  .codeflask__flatten {
    padding:     10px;
    white-space: pre;
    overflow:    auto;
    margin:      0;
    text-align:  left;
  }
  &.codeflask--has-line-numbers:before {
    border-right: 1px solid $form-control-border-color;
  }
}


// Quill

.ql-editor{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  bottom: 0;
  width: 100%;
  padding: 15px;
  .ql-video {
    width: 100%;
  }
}

.ql-picker-label {
    svg {
        vertical-align: baseline;
    }
}

.ql-color, .ql-background {
  .ql-picker-options [data-value=custom-color] {
    background: none !important;
    width: 100% !important;
    height: 20px !important;
    text-align: center;

    &:before {
      content: 'Custom Color';
    }

    &:hover {
      border-color: transparent !important;
    }
  }
}

.ql-toolbar.ql-snow, .ql-container.ql-snow{
  border: 1px solid $form-control-border-color;
  font-size: $font-size-base;
  font-family: $font-family-base;
}


// frappe-chart chart
.graph-svg-tip {
  @extend .bg-dark;
  @extend .rounded;
}

.chart-container .axis, .chart-container .chart-label {
    color: $text-muted !important;
}

.legend-dataset-text {
    color: $text-muted !important;
    font-weight: 500 !important;
}


// leaflet-touch

.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
  font-size: $font-size-base;
}

// toast
.toast-wrapper {
  position: fixed;
  top: 1.5em;
  right: 1.5em;
  z-index: $zindex-fixed;
  width: 20em;
}

@include media-breakpoint-down(sm) {
  .toast-wrapper {
    width: 100vw;
    top: 1.5em;
    right: 0;
    left: 0;
    overflow: hidden;

    .toast {
      backdrop-filter: blur(1em);
      max-width: 100vw;
      margin: 0 auto;
    }
  }
}

.matrix {

    div, span {
        border: none !important;
    }

    .form-control, .select2-selection--single {
        border: none !important;
        height: 40px !important;
        font-weight: 400;
        &:focus{
            border-radius: 0;
        }
    }

    .form-group {
        margin: 0 !important;
    }

    .custom-control {
        margin-left: 1em;
    }
}

// legend
.d2-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: span 2 / span 2;
}

.d2-grid dd {
    grid-column: span 2 / span 2;
}

// Scroll to top
.scroll-to-top {
    opacity: 0;
    /*transition: all 340ms;*/

    &.show {
        opacity: 1;
    }
}


.profile-container {
    background: rgb(19, 20, 21);
    position: relative;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;

    a, svg, span {
        line-height: normal;
    }
}


.attach {
    .spinner-border {
        display: none;
    }

    .attach-image {
        object-fit: cover;
        height: 12em;
        width: 100%;
        border: 1px solid #000;
        position: relative;

        &:before {
            content:  " ";
            display:  block;
            position: absolute;
            left:     0;
            height:   100%;
            width:    100%;
            @extend .bg-light;
        }

        &:after {
            content:         "🔗";
            position:        absolute;
            top:             0;
            left:            0;
            right:           0;
            bottom:          0;
            display:         flex;
            align-items:     center;
            justify-content: center;
            width:           100%;
            text-align:      center;
            @extend .h3;
        }
    }

    .attach-image-placeholder {
        height: 12em;
        display: flex;
        cursor: pointer;
        align-content: center;
        align-items: center;
    }

    &[aria-busy='true'],
    &:not([data-attach-loading-value='0']) {
        .spinner-border {
            display: inline-block;
        }

        .choose {
            display: none !important;
        }
    }
}
