/* ------------------------------------------------------------- 06/12/2023 - *
   .b-fotogroup-upload
 * -------------------------------------------------------------------------- */ 
.b-fotogroup-upload {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  max-width: 356px;
  margin: auto;
  margin-bottom: 1em;
  background-color: rgba(var(--text-rgb, Fuchsia),.05);
  border-radius: 4px;

  .slim  { 
    background-color: transparent;
    cursor: pointer;
    transition: .3s;
    
    &[data-state*=empty]:hover {
                 color: var(--link-hex, Fuchsia);
      background-color: transparent;
    } /* hover */
  } /* .slim */
  
  &.-dummy:after {
    font-weight: bold;
    content: 'Für Foto Upload neuen \a Eintrag zuerst speichern!';
    white-space: pre;
    text-align: center;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* absolute-center */
    opacity: .3;
  }

  /* ---------------------------------- *
   * Fotogrid Hilfslinien
   * ---------------------------------- */
  &.-fotogrid:before,
  &.-fotogrid:after {
    z-index: 1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(DeepPink,.5) 1px, transparent 1px);
  }

  &.-fotogrid:before { top: 0%; left: 20%; background-size: 60%; } /* lines vertikal */
  &.-fotogrid:after  { top: 8%; left:  0%; background-size: 84%; transform: rotate(90deg); } /* lines horizontal */
  
  .cl-fotogrid {
    z-index: 9;
    position: absolute;
    top: 3%;
    right: 3%;    
    transition: .5s;
    cursor: pointer;
    outline: none;
    width: 36px;
    height: 36px;
               color: White;    
    background-color: rgba(0,0,0,.7);
    border-radius: 50%;
    opacity: .5;
    
    i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.25); /* absolute-center */ }
    
    &:hover { opacity: 1; }
  } /* .cl-fotogrid */
} /* b-fotogroup-upload */