@import "~cropperjs/dist/cropper.min.css"


#nml-tool
  .flatpickr-input
    width: 120px
  .loader > div > div
    height: 100vh
  .popup .bg-white
    position: relative
    width: 600px
  #nml_cropper
    .bg-white
      max-width: 1000px
    .cropper-point
      background: #fff
    .cropper-view-box
      outline: 1px dashed #fff
    .cropper-line
      display: none


.nml-close
  font-size: 32px
  font-weight: 100
  height: 50px
  line-height: 1
  outline: none
  position: absolute
  right: 0
  top: 0
  width: 50px
  z-index: 2


.nml-display
  width: 36px
  svg
    display: block
    height: 36px
  &-gallery
    margin-left: -4px
    margin-right: -4px
    .nml-item
      padding-left: 4px
      padding-right: 4px
      width: 158px
      &.checked .icon
        box-shadow: 0 0 0 3px var(--primary-70)
    .icon
      background-size: 36px 36px
      box-shadow: 0 4px 8px 0 rgba(#000, .12), 0 2px 4px 0 rgba(#000, .08)
      padding-bottom: 100%
    .title
      background: rgba(#000, .6)
      border-radius: 0 0 .5rem .5rem
      bottom: 0
      color: #fff
      font-size: 12px
      left: 4px
      padding: 2px 8px
      position: absolute
      text-align: center
      width: calc(100% - 8px)
    [class*="nml-icon-folder"] + .title
      background: transparent
      color: #434d5d

  &-list
    .nml-item
      background: #fff
      box-shadow: 0 4px 8px 0 rgba(#000, .06), 0 2px 4px 0 rgba(#000, .04)
      border-radius: .5rem
      flex-direction: row
      display: flex
      height: 40px
      width: 100%
      &.checked
        box-shadow: 0 0 0 3px var(--primary-70)
    .icon
      background-size: 24px 24px
      box-shadow: 1px 0 4px 0 rgba(#333, .05)
      height: 40px
      width: 50px
    .title
      color: var(--black)
      line-height: 40px
      margin-left: 10px
      max-width: calc(100% - 70px)
    .nml-folder-action
      margin-right: 10px
      width: auto
      .title
        display: none


.nml-field-index .icon
  background-size: 24px 24px
  border-radius: 6px
  height: 40px
  width: 40px
  .count
    background: var(--primary-dark)
    border-radius: 4px
    color: var(--white)
    font-size: 12px
    height: 20px
    line-height: 20px
    margin: -3px -5px
    min-width: 20px
    padding: 0 4px
    position: absolute
    right: -5px
    text-align: center
    top: -5px

.nml-field-form
  .popup
    .z-30
      max-width: 1280px
      position: relative
      width: 90%
  .delete
    background: var(--danger)
    border-radius: 8px
    cursor: pointer
    fill: var(--white)
    height: 30px
    padding: 5px
    position: absolute
    right: 9px
    top: 5px
    transition: .3s
    transform: scale(0)
    width: 30px
  .nml-item:hover .delete
    transform: scale(1)
    z-index: 2
  .nml-display-list .delete
    right: 5px


[nml-trix] .attachment__metadata-container
  display: none


.nml-item .icon
  background-color: #fff
  background-position: center
  background-repeat: no-repeat
.nml-icon-image
  background-size: cover !important
.nml-icon-file
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233c4b5f' d='M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z'%3E%3C/path%3E%3C/svg%3E")
.nml-icon-audio
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233c4b5f' d='M470.38 1.51L150.41 96A32 32 0 0 0 128 126.51v261.41A139 139 0 0 0 96 384c-53 0-96 28.66-96 64s43 64 96 64 96-28.66 96-64V214.32l256-75v184.61a138.4 138.4 0 0 0-32-3.93c-53 0-96 28.66-96 64s43 64 96 64 96-28.65 96-64V32a32 32 0 0 0-41.62-30.49z'%3E%3C/path%3E%3C/svg%3E")
.nml-icon-video
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%233c4b5f' d='M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z'%3E%3C/path%3E%3C/svg%3E")
.nml-icon-folder
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%233c4b5f' d='M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z'%3E%3C/path%3E%3C/svg%3E")
.nml-icon-folder-create
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233c4b5f' d='M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48zm-96 168c0 8.84-7.16 16-16 16h-72v72c0 8.84-7.16 16-16 16h-16c-8.84 0-16-7.16-16-16v-72h-72c-8.84 0-16-7.16-16-16v-16c0-8.84 7.16-16 16-16h72v-72c0-8.84 7.16-16 16-16h16c8.84 0 16 7.16 16 16v72h72c8.84 0 16 7.16 16 16v16z'%3E%3C/path%3E%3C/svg%3E")
.nml-icon-folder-back
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233c4b5f' d='M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z'%3E%3C/path%3E%3C/svg%3E")
.nml-icon-folder-remove
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233c4b5f' d='M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48zM340.85 338.91c6.25 6.25 6.25 16.38 0 22.63l-11.31 11.31c-6.25 6.25-16.38 6.25-22.63 0L256 321.94l-50.91 50.91c-6.25 6.25-16.38 6.25-22.63 0l-11.31-11.31c-6.25-6.25-6.25-16.38 0-22.63L222.06 288l-50.91-50.91c-6.25-6.25-6.25-16.38 0-22.63l11.31-11.31c6.25-6.25 16.38-6.25 22.63 0L256 254.06l50.91-50.91c6.25-6.25 16.38-6.25 22.63 0l11.31 11.31c6.25 6.25 6.25 16.38 0 22.63L289.94 288l50.91 50.91z'%3E%3C/path%3E%3C/svg%3E")
/*.nml-display-list, .nml-field-index
  .nml-icon-image
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233c4b5f' d='M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z'%3E%3C/path%3E%3C/svg%3E") !important
    background-size: 24px 24px !important*/

body.overflow-hidden #nova
  &, #nml-tool .popup
    overflow-y: scroll

@media (max-width: 1024px)
  #nml-tool
    .flatpickr-input
      margin-right: 1rem
    > .flex.select-none > *
      margin-bottom: 1rem

@media (max-width: 767px)
  .nml-display-gallery .nml-item
    width: 25%
  .nml-field-form .nml-item a.pin
    display: none

@media (max-width: 520px)
  .nml-display-gallery .nml-item
    width: 50%
  #nml-tool > .flex.select-none > .max-w-full
    margin: 0 0 1rem
    width: 100%
