////
/// @group attribute holders
/// @author Scott Casey
////
@use '../generic_scss/borderPlaceholders';
@use '../generic_scss/materialIcons';

/// The styling for basic collapsible/expandable sections.
@mixin collapsible{
  .collapse-container{
    display:grid;
    position:relative;
  }
  .text-collapse{
    cursor:pointer;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    &:before{
      content: var(--expandedSymbol);
      @include materialIcons.materialStyle;
    }
  }
  .text-collapse__text{
    display:inline;
  }
  .text-collapse__check{
    &:not(:checked) + .text-collapse{
      @include borderPlaceholders.inputHighlight;
    }
    &:checked + .text-collapse:before{
      content: var(--collapsedSymbol);
    }
  }
  .repitem,
  .collapse-container{
    &:hover{
      > .collapse,.roll-container{
        opacity:var(--collapseHoverOpacity);
      }
    }
    > .collapse{
      opacity:var(--collapseBaseOpacity);
      position:absolute;
      right:-10px;
      top:0px;
      border:0px solid black;
      border-radius:0;
      color:var(--collapseExpandedColor);
      text-transform:none;
      background-color:transparent;
      &:before{
        content:'y';
        font-family:pictos;
      }
      &:checked{
        color:var(--collapseCollapsedColor);
        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{
          display:none !important;
        }
      }
      &:hover{
        color:var(--collapseExpandedColor);
      }
    }
  }
  .repcontainer.editmode{
    .collapse{
      display:none;
    }
  }
}