@use 'borderPlaceholders';
@use 'materialIcons';
%collapsible{
  .collapse-container{
    position:relative;
  }
  .text-collapse{
    cursor:pointer;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    &:before{
      content:'unfold_less';
      @extend %materialStyle;
    }
  }
  .text-collapse__text{
    display:inline;
  }
  .text-collapse__check{
    &:not(:checked) + .text-collapse{
      @extend %inputHighlight;
    }
    &:checked + .text-collapse:before{
      content:'unfold_more';
    }
  }
  .repitem,
  .collapse-container{
    &:hover{
      .collapse,.roll-container{
        opacity:1;
      }
    }
    .collapse{
      opacity:0;
      position:absolute;
      right:-10px;
      top:0px;
      border:0px solid black;
      border-radius:0;
      color:var(--selectedColor);
      text-transform:none;
      background-color:transparent;
      &:before{
        content:'y';
        font-family:pictos;
      }
      &:checked{
        color:var(--unselectedColor1);
        background-color:transparent;
        ~ .expanded,
        ~ .collapse-container .expanded{
          display:none !important;
        }
        ~ .expanded--empty:is(:not([value]),[value='']) + *,
        ~ .collapse-container ~ .expanded--empty:is(:not([value]),[value='']) + *{
          display:none !important;
        }
      }
      &:not(:checked){
        ~ .collapsed,
        ~ .collapse-container .collapsed{
          display:none !important;
        }
      }
      &:hover{
        color:var(--selectedColor);
      }
    }
  }
  .repcontainer.editmode{
    .collapse{
      display:none;
    }
  }
  .section-control:not(:checked) + .section-display{
    display:none !important;
  }
  .empty-hider:is([value=''],:not([value])) + *{
    display:none;
  }
}