@define refs {
  name: collapse;
  caretLight: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  caretDark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

@define props {
  caretX: 0px;
  caretY: 3.5px;
  itemPadX: 1rem;
  itemPadY: 0.5rem;
}

@alga {refs.name} {
  .{refs.name} {
    ref: width-100pct;
  
    &Toggler {
      ref: width-inherit position-relative;
      
      &::after {
        ref: width-1.25em lineHeight-0px content-{refs.caretLight} position-absolute;
        ref: top-{props.caretY} right-{props.caretX};
        ref-transition: transform 0.35s ease;
        ref-transformOrigin: .5em 50%;
        prefers-dark: content-{refs.caretDark};
        prefers-toDark: content-{refs.caretDark};
        prefers-toLight: content-{refs.caretLight};
      }
    }
    
    &Menu {
      ref: display-none padding-0.5rem_0px margin-0 fontSize-1rem color-inherit textAlign-left;
      ref: listStyle-none;
      
      .{refs.name}Item {
        ref: display-block width-100pct padding-{props.itemPadY}_{props.itemPadX};
        ref: color-inherit textAlign-inherit textDecoration-none whiteSpace-nowrap;
        ref: clear-both fontWeight-400 backgroundColor-transparent border-0px;
      }
    }
    
    &.active,
    &.show {
      ref: paddingBottom-0px;
    
      .{refs.name}Toggler::after {
        ref-transform: rotate(90deg);
      }
      
      .{refs.name}Menu {
        ref: display-block;
      }
    }
  }
}